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

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

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

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

下面进行操作演示

1.申请密钥

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

2.开通webserviceAPI服务

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

 

3.下载微信jssdk文件

进入官网，点此下载即可

下载后，获取文件

如下方官网示例代码，引入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、选择位置接口，填写申请原因

 

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

/**
 * @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;
				}
			});
		}
	});
},

 

 

重点。。。

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

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

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

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

最后才找到这个问题。

 

 

报错信息

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

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

 

 

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