uni-app中使用腾讯位置服务实现小程序地图选点功能
作者:互联网
文章目录
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>
标签:选点,插件,const,位置服务,chooseLocation,app,程序,location 来源: https://blog.csdn.net/weixin_40816738/article/details/122266518