效果展示
一、 登录腾讯地图官网
地址: https://lbs.qq.com/
1、注册登录
2、进入应用管理
3、分配配额 (为了解决 调用腾讯地图插件 提示此key每日调用量已达上限的问题)
配额根据实际情况进行分配(下面只是开发调试时分配的配额)
二、 登录微信公众平台
1、添加插件 (进入设置 – 第三方设置 – 添加插件 )
三、使用插件
1、 在manifest.json中配置插件 配置定位权限
插件
"plugins" : {
"chooseLocation": {
"version": "1.0.10",
"provider": "wx76a9a06e5b4e693e"
}
},
权限
"permission" : {
"scope.userLocation" : {
"desc" : "获取当前城市"
}
},
2、使用插件
在需要跳转的函数中写入
const key = ''; //使用在腾讯位置服务申请的key
const referer = ''; //调用插件的app的名称
const location = JSON.stringify({
latitude: 39.89631551,
longitude: 116.323459711
});
const category = '生活服务,娱乐休闲';
uni.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
});
如何获取从定位界面返回后取得的参数?
在调用界面的onshow函数中使用,在onUnload函数中清除数据
onShow() {
const chooseLocation = requirePlugin('chooseLocation');
const location = chooseLocation.getLocation();
if(location){
this.province = location.province;
this.city = location.city;
this.area = location.district;
this.address = this.provice + '-' + this.city + '-' + this.area;
this.addressDetail = location.name;
}
},
onUnload () {
// 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果
const chooseLocation = requirePlugin('chooseLocation');
chooseLocation.setLocation(null);
}
注:腾讯位置服务小程序插件介入文档
https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker