uni-app中使用腾讯位置服务实现小程序地图选点功能

刺骨的言语ヽ痛彻心扉 2022-12-27 09:30 463阅读 0赞

## 技术选定（地图选点插件） ##

#### （对应官网：https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker ） ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]

### 准备工作：登录微信公众平台后，添加的插件，如上图 ###

### 1. 如果是微信小程序则直接按照，文档给定的4项步骤配置完成(； ###

### \*\* 如果使用uni-app开发的小程序，配置的位置 HBuilder工具中注意 \*\* ###

#### 如图： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]

#### 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 #####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221120/5492c6cf84bc499cbb17e66cea2134dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20221120/d7a644bb76d743139c3bebd417f26648.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20221120/3f2a57ac72ea4f71a9db1072544e1958.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20221120/cc6b86f9132c464593f0b2fb2242cbab.png