uni-app使用腾讯地图（三）

Posted 2023-04-10

参考技术A uni-app使用腾讯地图（一）
uni-app使用腾讯地图（二）

为什么要用个性化地图，提高不同场景下地图的展现效果和用户体验。

为什么选择腾讯位置服务个性化地图：

1.登录腾讯位置服务

2.验证手机 与 邮箱
3.申请开发密钥（Key）
4.选择您需要的产品

位置展示组件

路线规划组件

前端定位组件

1.我申请了开发者密钥key
2.开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
日调用量：1万次 / Key----并发数：5次 / key / 秒 。

我返回的数据如图：

QQMapWX – 小程序javascriptSDK核心类 – new QQMapWX(options:Object)

地点搜索：

效果如图：

预览效果如图下：

geocoder – 提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。
预览效果如图：

预览效果图如下：

调用获取城市列表接口，效果图如下：

获取城市区县，效果图如下：

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

uni-app 之地图 map

参考技术A longitude： 经度
latitude： 纬度
scale： 缩放级别，也就是说放大缩下的程度，取值范围是5-18，默认的是16 ，他就是呢值数越大，放大程度越大，看的越细，看村庄的那种
markers： 标记点 就是说你在地图上标记出来的东西
polyline： 路线 可以写两个标记点 然后用路线将他们连接起来
circle： 圆 就是说在地图上画个圈？
controls： 控件 他就是说那 在地图上显示一个控件，但是这个控件并不随着地图移动
include-points： 缩放视野以包含所有的坐标点　这就是说你坐标点很多的时候，缩小时可以看到全部
show-location： 显示带有方向的当前定位点

注意：当时说想做成那种地图上面带有div的 就是说地图上面可以显示门店位置。门店名称的那种，我当时用定位在网页上实现的，但是一到手机上运行的时候，发现显示不出来，后来我仔细看了一下，那个map组件享有最高的优先级，

你用定位之类，根本就实现不了，后来我发现了一个叫<cover-image> 和 <cover-view > 他是可以覆盖在原生组件上的文本视图 但是也有注意点它不支持的css：

position: fixed
opacity
overflow
padding
linebreak
white-space
另外还有： 在APP端它不支持嵌套其他组件，也不支持本身组件的嵌套，app现在<cover-view>只可以不该原生组件video和map， 一定要注意