uniapp微信小程序引入高德地图

2,117 阅读1分钟

说一下基本的使用流程;

1.使用高德地图的基本:

注册账号 申请 Key 和 安全密钥

有了 Key 和 安全密钥,才能去使用高德地图的API

加载好资源之后,再使用高德地图的API初始化地图;

2.首先下载高德小程序sdk amap-wx.130.js

高德地址sdk下载地址:lbs.amap.com/api/wx/down…

3.在项目中引入

import amap from '../../util/amap-wx.130.js';

4.配置加载地图

this.amapPlugin = new amap.AMapWX({ key: this.key, });

5.使用map组件

<map class="map" id="map" :latitude="latitude" :longitude="longitude" scale="18" show-location="true" :markers="markers" @tap="getCurrentLocation" style="width: 100%; height: 100%" ></map>

6.就可以使用高德api

api地址:lbs.amap.com/api/wx/guid…

`

this.amapPlugin.getRegeo({

// iconPathSelected: '../../static/img/mark_bs.png', //如:..­/..­/img/marker_checked.png

location: coordinate,

success: (data) => {

this.addressMap = data[0].regeocodeData.formatted_address;

this.mapdata = data[0].regeocodeData;

this.regeocodeData = data[0].regeocodeData;

console.log(this.addressMap);

if (this.addressMap.length > 0) {

this.show = true;

} else {

uni.showToast({

icon: 'none',

title: '当前位置无法使用',

});

}

},

fail: (info) => {

//失败回调

console.log('getRegeo', info);

},

});

`

7.为了保证高德小程序插件中提供的功能的正常使用,需要设置安全域名。

登录微信公众平台,在 "设置"->"开发设置" 中设置 request 合法域名,将 restapi.amap.com 中添加进去。