首先在高德开放平台,注册账号并且申请相关的 key 等信息;
然后下载它的微信小程序版 SDK:微信小程序 SDK。
然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生sdk。注意:App侧在Android中使用定位,或者Android、iOS使用地图,仍然需要同时向高德申请原生sdk的key信息,填写在manifest的app sdk配置中。
新建一个 uni-app 项目,新建一个 common 目录,然后将前面下载得到的 amap-wx.js 的文件复制进去。
Tip:这个 common 目录只是举例,并非强制约定。但是,不要放在 static 目录下。
引入SDK
新建的 uni-app 默认会有一个 index 页,在 index.vue 中,引入高德小程序 SDK。
import amap from '../../common/amap-wx.js';
export default {
}
在 onLoad 中初始化一个高德小程序 SDK 的实例对象。
import amap from '../../common/amap-wx.js';
export default {
data() {
return {
amapPlugin: null,
key: '这里填写高德开放平台上申请的key'
}
},
onLoad() {
this.amapPlugin = new amap.AMapWX({
key: this.key
});
}
}
使用API
利用高德小程序 SDK,获取当前位置地址信息,以及当前位置的天气情况。
import amap from '../../common/amap-wx.js';
export default {
data() {
return {
amapPlugin: null,
key: '高德key',
addressName: '',
weather: {
hasData: false,
data: []
}
}
},
onLoad() {
this.amapPlugin = new amap.AMapWX({
key: this.key
});
},
methods: {
getRegeo() {
uni.showLoading({
title: '获取信息中'
});
this.amapPlugin.getRegeo({
success: (data) => {
console.log(data)
this.addressName = data[0].name;
uni.hideLoading();
}
});
}
}
}