uni-app中使用腾讯位置服务实现小程序地图选点功能
技术选定(地图选点插件)(对应官网:https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker )1. 如果是微信小程序则直接按照,文档给定的4项步骤配置完成;** 如果使用uni-app开发的小程序,配置的位置 HBuilder工具中注意 **如图:2. 实现代码【上面链接官方都有】manifest.json/* 小程序特有相
·
技术选定(地图选点插件)
(对应官网:https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker )
准备工作:登录微信公众平台后,添加的插件,如上图
1. 如果是微信小程序则直接按照,文档给定的4项步骤配置完成(;
** 如果使用uni-app开发的小程序,配置的位置 HBuilder工具中注意 **
如图:
2. 实现代码【上面链接官方都有】
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"
}
}
},
页面代码
<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>
后语:
uni-app中使用腾讯地图sdk(解析经纬度)获取用户所在位置信息 ,看我另一篇:
https://blog.csdn.net/qq_41930094/article/details/110937890
更多推荐
已为社区贡献3条内容
所有评论(0)