uniapp使用高德地图定位(兼容app)
1.获取Key
需要:应用包名和SHA1()
2.配置manifest.json
3.设置安全通讯域名
登录,在 "设置"->"开发设置" 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去
在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下,完成安装。
5.在项目中使用
import amap from ../../../libs/amap-wx.130.js; // 导入插件
...
amapPlugin: any = null;
onLoad(option: any) {
// 使用高德SDK
// #ifdef APP-PLUS
switch (uni.getSystemInfoSync().platform) {
case android:
(this as any).amapPlugin = new amap.AMapWX({
key: ANDROID_KEY
});
break;
}
// #endif
// #ifndef APP-PLUS
(this as any).amapPlugin = new amap.AMapWX({
key: WX_KEY
});
// #endif
}
onShow() {
// 获取当前定位
this.get_location();
}
get_location() {
//高德地图定位
uni.showLoading({
title: 获取信息中
});
this.amapPlugin.getRegeo({
success: data => {
// 获取当前地址
this.addressContent = data[0].name;
console.log(
当前位置的经度: + data[0].longitude,
当前位置的纬度: + data[0].latitude
);
},
fail(res) {
//解析经纬度地址
uni.showModal({
title: 提示,
content: 如果您拒绝授权地址,将无法获取周围的店铺,是否打开位置授权?,
success(res) {
if (res.confirm) {
console.log(用户点击确定);
that.openSetting();
} else if (res.cancel) {
console.log(用户点击取消);
// 拒绝授权返回上一页
that.$Router.back(1);
}
}
});
}
});
}
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
微信小程序如何上传图片
