uni-app中使用腾讯地图sdk（解析经纬度）获取用户所在位置信息

Love The Way You Lie 2022-12-27 08:48 490阅读 0赞

## 前言： 技术选定 ##

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

### 具体步骤： ###

#### 1. 注册开发者账号、申请密钥、开通webserviceAPI服务、下载小程序SDK、微信后台配置请求request域名。 ####

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

###### （ 请按官方完成以上操作：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview ） ######

##### 注意点： #####

###### 下载微信的sdk，考虑网络问题(点击没反应)，直接F12 找到那串地址copy到地址栏，进行回车； ######

###### SDK那串地址：( http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip ) ######

###### 微信公众平台中配置request请求域名，注意找对位置及域名直接分号隔开，添加成功后微信开发者工具刷新； ######

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

#### 2. copy解压后的 qqmap-wx-jssdk.js文件放到项目中，然后在页面引入使用 ####

##### \[ uni-app中我们使用 qqmap-wx-jssdk.js 这个文件就好（另一个.min.js不管）\] #####

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

#### 3.上代码 ####

##### 1.uni.getLocation方法 负责获取用户所在经纬度； #####

##### 2.使用腾讯sdk 的reverseGeocoder方法解析经纬度–拿到用户省市区街道信息； #####

<template>
    
    </template>
    
    <script> //引入腾旭地图sdk import QQMapWX from '../../untils/qqmap-wx-jssdk.js' import app from '../../App.vue' export default { data() { return { title: 'Hello index' } }, onLoad() { //拿地址 this.getMapAddress(); }, methods: { getMapAddress() { const tMap = new QQMapWX({ key: '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF' //开发者密钥 }); //使用 uni.getLocation获取用户所在经纬度 uni.getLocation({ type: 'wgs84', geocode: true, success: (res) => { console.log("获取经纬度成功"); this.latitude = res.latitude; this.longitude = res.longitude; }, fail: () => { console.log("获取经纬度失败"); }, complete: () => { // 使用腾讯sdk的reverseGeocoder方法 解析经纬度 tMap.reverseGeocoder({ location: { latitude: this.latitude, longitude: this.longitude }, success: function(res) { console.log("解析地址成功", res); console.log("当前地址：", res.result.address); //保存缓存 uni.setStorage({ key:'local', data:res.result.address, success() { console.log("用户地址信息已缓存") } }) }, fail: function(res) { uni.showToast({ title: '定位失败', duration: 2000, icon: "none" }) console.log(res); }, complete: function(res) { //无论成功失败都会执行 wx.switchTab({ url: '../appointment/appointment' }) } }) } }) } } } </script>
    
    <style> </style>

点击获取弹框提示信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]

#### 解决方法： ####

###### 在xhbuilder中的manifest.json文件中添加如下代码：（这里的提示信息，用于微信获取位置弹框中----自定义的描述文字） ######

"permission" : {
    	    "scope.userLocation" : {
    	        "desc" : "你的位置信息将用于小程序定位" //
    	    }
    	}

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 4]

#### 如下图：现在应该知道那串—描述文字的作用了吧。 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 6]

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

##### 请看：https://blog.csdn.net/qq\_41930094/article/details/110949997 #####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221120/b0ea422394ee44ab984a26d9d08c6f1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20221120/f9c5dab504504a409499051bc3327c99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5cc0cad550214b6da2de39c6ad8d691f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/9a33c05b9be5441ab2120fe98926bdaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/bedce352fee645c48bd031509a548c0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/cac6ec97a11e49ffb2e6124f45b99153.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20221120/7737fc6aba714fc5bd1203f1ea09d73e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20221120/8a51633d78c74a8da66a33397e0a3b59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/1700d057807b415e9cd3555e7a150313.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]: /images/20221120/f4275bae30a145db981694b54bc449ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/84dca3e08750452a879e17ea27dc2831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/5ebdbc460bb44cca81fba4a5a52d46e7.png