【2022-2-12】uniapp和地图的key申请与参考学习文档

底层引擎

<map> 组件在不同平台的底层引擎是不同的：
微信小程序为腾讯地图；
H5为腾讯地图或谷歌地图；
App、支付宝小程序为高德地图；
百度小程序、快应用为百度地图。
app-vue也可以使用百度地图，在manifest中配置，打包后生效，但app-nvue只支持高德地图。
另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图。

层级问题

小程序和app-vue中，<map> 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
在<map>上绘制内容，可使用组件自带的marker、controls等属性，也可以使用<cover-view>组件。
App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容，参考：https://uniapp.dcloud.io/component/native-component。
另外App端nvue文件不存在层级问题。
从微信基础库2.8.3开始，支持map组件的同层渲染，不再有层级问题。ps：这句说的是vue还是nvue？

App端推荐使用nvue

• vue有层级问题：小程序和app-vue中，
• map 组件默认的api是参考微信小程序的，如需要使用plus.map，可以通过$getAppMap获取原生地图对象。nvue无法使用‘$getAppMap，nvue的map组件不是plus.map` 对象
• map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02
• ios nvue Color 不支持 ARGB 十六进制，使用 rgba(r,g,b,a) 代替
• 只支持 只支持flex布局
• 阻止冒泡：https://www.freesion.com/article/4461997630/
• nvue修改字体的样式只能写在text标签
  样式参考：https://www.cnblogs.com/cyhsmile/p/13925477.html

/*错误*/
border: 1px solid #ccc;
/*正确*/
border-width: 1px;
border-style: solid;
border-color: #ccc;

---

uniapp如果需要使用第三方的地图，需要先到开发平台申请key

应用打包时使用证书的指纹字符串（SHA1）

HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo

Android平台签名证书(.keystore)生成指南

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
test.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期

keytool -list -v -keystore test.keystore  
Enter keystore password: //输入密码，回车

---

iOS平台签名证书(.profile)生成指南

网上查资料说是要去苹果开发平台上申请

map组件

近期新增功能

• 支持点聚合，适用于marker过多场景。
• 支持彩虹蚯蚓线，常用于路线规划场景。
• 覆盖物支持调整与其它地图元素的压盖关系。
• 支持marker（小车）平移动画，适用于轨迹回放场景。

点聚合

当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。
使用流程如下：
MapContext.initMarkerCluster 对聚合点进行初始化配置（可选）；
MapContext.addMarkers 指定参与聚合的 marker；
MapContext.on('markerClusterCreate', callback) 触发时，通过 MapContext.addMarkers 更新聚合簇的样式 （可选）；
MapContext.removeMarkers 移除参与聚合的 marker；

彩虹蚯蚓线-----------polyline

兼容性：App-nvue 3.1.0+、微信小程序
如：

this.polyline = [{
	points: points,
	arrowLine:true,
	color: "#0091ff",
	// colorList:[],//彩虹蚯蚓线---路线规划，设置之后，上面的color将被覆盖
	width: 6
}]

---

mapAPI

mapSearch 模块(仅app-nvue支持

1、reverseGeocode(Object,callback);反向地理编码
2、poiSearchNearBy（Object,callback);周边搜索
3、poiKeywordsSearch（Object,callback); 关键字搜索

---

系统定位

uniapp新增了系统定位，系统定位有的机型不支持。3.3.0 版本以上 优化系统定位模块，可不使用三方定位SDK的进行高精度定位，具体参考：系统定位。

系统定位调用设备的操作系统提供的定位服务，只支持wgs84坐标系，不同设备对定位功能支持的情况有所差异。

如何设置途径点以及途径点的数据格式

waypoints="108.936799,34.245842;108.973306,34.244767;109.013335,34.249303";

---

参考：
uniapp map组件：https://uniapp.dcloud.io/component/map
高德地图开放平台：https://console.amap.com/dev/index
地图插件配置：如何申请地图的key：https://ask.dcloud.net.cn/article/29
Android平台签名证书(.keystore)生成指南：https://ask.dcloud.net.cn/article/35777#keyinfo
uni.createMapContext(mapId,this)：https://uniapp.dcloud.io/api/location/map?id=createmapcontext
mapSearch 模块(仅app-nvue支持)：https://uniapp.dcloud.io/api/location/map?id=mapsearch-%E6%A8%A1%E5%9D%97%E4%BB%85app-nvue%E6%94%AF%E6%8C%81
nvue map 更换箭头图标格式：https://ask.dcloud.net.cn/article/37901