uni-app微信小程序获取用户地理位置信息

╰+哭是因爲堅強的太久メ 2022-12-12 15:22 429阅读 0赞

> uni-app 小程序项目无法直接获取到地理位置，只能通过获取到的经纬度，调用第三方地图Api获取。

这里根据[腾讯位置服务官网][Link 1]给出的开发指南进行操作，微信小程序获取地理位置需要进行的操作

这里开发的是微信小程序，所以选择腾讯地图

下面进行操作演示

### 1.申请密钥 ###

[申请开发者密钥（key）][key]输入即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

### 2.开通webserviceAPI服务 ###

控制台 -> key管理 -> 设置（使用该功能的key）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

### 3.下载微信jssdk文件 ###

进入官网，点此下载即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 2][]

下载后，获取文件

![20201119161454299.png][]

如下方官网示例代码，引入qqmap-wx-jssdk.js 文件

下面是代码获取位置示例：

// 引入SDK核心类
    var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    var qqmapsdk;
    Page({
        onLoad: function () {
            // 实例化API核心类
            qqmapsdk = new QQMapWX({
                key: '申请的key'
            });
        },
        onShow: function () {
            // 调用接口
            qqmapsdk.search({
                keyword: '酒店',
                success: function (res) {
                    console.log(res);
                },
                fail: function (res) {
                    console.log(res);
                },
            complete: function (res) {
                console.log(res);
            }
        });
    })

这里是代码配置位置

### 4.manifest.json配置 ###

manifest.json- 微信小程序配置 - 填写微信小程序AppID、选择位置接口，填写申请原因

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 3][]

上面是配置，下面这一部分是[转载的代码][Link 2]

/**
     * @Author: licheng
     * @Date: 2019/12/21 6:06 下午
     * @Description:
     */
    import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js";
    
    const getCity = () => {
      return new Promise((resolve, reject) => {
        // 获取授权信息
        uni.getSetting({
          success: res => {
            // console.log(res);
            if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) {
              if (res.authSetting["scope.userLocation"]) {
                getCityInfo();
              } else {
                uni.showModal({
                  title: "提示",
                  content: "请重新授权获取你的地理位置，否则部分功能将无法使用",
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting({
                        success: () => getCityInfo()
                      });
                    } else {
                      reject("请授权获取你的地理位置，否则部分功能将无法使用！");
                    }
                  },
                });
              }
            } else {
              getCityInfo();
            }
          }
        });
    
        // 获取地理位置信息
        const getCityInfo = () => {
          // 腾讯地图Api
          const qqmapsdk = new QQMapWX({ key: "这里填写腾讯地图的秘钥" });
          // 授权
          uni.authorize({
            scope: "scope.userLocation",
            success: () => {
              uni.getLocation({
                type: "gcj02", //  wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
                success: res => {
                  const {latitude, longitude} = res;
                  const location = {latitude, longitude};
                  qqmapsdk.reverseGeocoder({
                    location,
                    success: res => resolve(res.result)
                  });
                }
              });
            },
            fail: () => reject("请授权获取你的位置，否则部分功能将无法使用！"),
          });
        };
      });
    };
    
    export default getCity;

这一段实现的是需要用户授权才能继续进行下去的功能。不是简单的获取地理位置。

简单的只获取位置，但是用户不授权也既可以继续运行的，参考如下：

getAddress() {
    	uni.getLocation({
    		success: res => {
    			this.lat = res.latitude;
    			this.lng = res.longitude;
    
    			qqmapsdk.reverseGeocoder({
    				location: {
    					latitude: res.latitude,
    					longitude: res.longitude
    				},
    				success: res => {
    					let adInfo = res.result.ad_info;
    					let region = [adInfo.province, adInfo.city, adInfo.district];
    					this.region = region;
    				}
    			});
    		}
    	});
    },

### 重点。。。 ###

这个是最重要的，之前没看到[腾讯位置服务官网][Link 1]的开发指南，导致走了不少弯路

配置位置：微信公众平台进入->开发->开发管理->开发设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 5][]

说这个重要的原因是之前不知道，导致小程序拿不到位置信息，线上报错

经过很多排查发现是  qqmapsdk.reverseGeocoder()在运行时报错

最后才找到这个问题。

### 报错信息 ###

这里地理位置在开发者工具上测试发现 uni.openSetting()在开发者工具上不能实现且无报错，最后是挨个打印发现的，经过检查及测试发现需要在真机上测试方可。

最后测试经过这个流程，获取地理位置正常！

参考：[uni-app 小程序项目获取地理位置][Link 2]

[Link 1]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
[key]: https://lbs.qq.com/dev/console/key/add
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221123/edf4ac43bcab40c7aad7303aeb22d176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20221123/91280a5a5f3d47cb87ce2472d37bfeb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 2]: /images/20221123/746b4c89af064bff90639d8537cc9ed5.png
[20201119161454299.png]: /images/20221123/7a3d9add0fed4a6b9b23e559e9f6df53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 3]: /images/20221123/ca4bb22944f340b78c670af7fd9c8f5f.png
[Link 2]: https://blog.csdn.net/BradyCC/article/details/103650722
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 4]: /images/20221123/2538808f2ed940228137490e74878b48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 5]: /images/20221123/b0d06394a0f443dd8d34dbf5d5bb062c.png