uniapp 如何引入高德地图

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 文件中

sdk目录

下面使用页面中引入文件  import amap from "../../js_sdk/js-amap/amap-wx.js";

---

在页面中使用map标签

:latitude="latitude"

:longitude="longitude"

scale="11" 

:markers="markers"

:show-location="true"

@markertap="markertap"

@updated='mapUpdated'

@tap='closeMapMarker'>

---

在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