文章目录
1. 官方文档
技术选定（地图选点插件）
（对应官网：https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker ）
2. 小程序添加插件
去微信小程序中-设置
https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1361472091&lang=zh_CN
直接搜索腾讯位置服务地图选点插件即可
准备工作：登录微信公众平台后，添加的插件，如上图
- 如果是微信小程序则直接按照，文档给定的4项步骤配置完成
3. HBuilder配置
** 如果使用uni-app开发的小程序，配置的位置 HBuilder工具中注意 **
如图：
4. 配置代码
实现代码【上面链接官方都有】
manifest.json
/* 小程序特有相关 */
"mp-weixin": {
"appid": "wx6a968da933xxxxxx",
"setting": {
"urlCheck": false,
"es6": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
},
"plugins": {
"chooseLocation": {
"version": "1.0.5",
"provider": "wx76a9a06e5b4e693e"
}
}
},
5. 页面代码
<template>
<view>
您已选择：{{chooseLocation}}
</view>
</template>
<script>
export default {
data() {
return {
chooseLocation: '中国',
};
},
onLoad() {
this.getAddress();
},
// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
onShow() {
const chooseLocation = requirePlugin('chooseLocation');
const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
console.log("您所选择的位置：", location);
if(location){
this.chooseLocation = location.address;
}
},
onUnload() {
// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
chooseLocation.setLocation(null);
},
methods: {
getAddress() {
const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在腾讯位置服务申请的key
const referer = '那年绿荫下白裙的你'; //调用插件的app的名称
const location = JSON.stringify({
latitude: 39.89631551,
longitude: 116.323459711
});
const category = '生活服务,娱乐休闲';
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category
});
},
}
};
</script>
<style lang="scss" scoped>
</style>