uniapp 默认是使用腾讯地图,想要使用第三方高德地图。
1、首先要注册高德地图,然后下载微信小程序SDK 微信小程序sdk也支持app端使用。
2、去高德控制台 管理中心 》 应用管理 》新建应用
需要在哪些平台使用,就在对应的应用中创建对应的key。
创建android平台key时需要提拱 发布版安全码SHA1 (就是安卓证书的SHA1)、PackageName(就是你应用的包名)
创建ios平台key时需要提供 安全码Bundle ID(就是你应用的包名)
将这些key 填入你项目文件manifest.json下的 App SDK配置中就可以
3、下面就是引用高德地图
将下载好的微信小程序sdk文件放下项目根目录js_sdk 文件中
下面使用页面中引入文件 import amap from "../../js_sdk/js-amap/amap-wx.js";
在页面中使用map标签
<map
:latitude="latitude"
:longitude="longitude"
scale="11"
:markers="markers"
:show-location="true"
@markertap="markertap"
@updated='mapUpdated'
@tap='closeMapMarker'></map>
在onLoad中 加入代码
this.amapPlugin = new amap.AMapWX({
key: this.mapKey //该key 是在高德中申请的微信小程序key
});
this.amapPlugin.getRegeo({
type: 'gcj02', //map 组件使用的经纬度是国测局坐标, type 为 gcj02
success: function(res) {
const latitude = res[0].latitude;
const longitude = res[0].longitude;
that.longitude = longitude;
that.latitude = latitude;
that.mapInfo=res[0];
},
fail: (res) => {
console.log(JSON.stringify(res));
}
});
好了,这样地图就展现出来了
如果想在地图上绘制其它元素,使用view标签是盖不住地图的,因为地图是原生组件优先级非常高,可以使用cover-view 组件覆盖,但是在app中 cover-view是不支持嵌套的,需要使用原生绘制 plus.nativeObj.View 或者是subnvue