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 小程序项目获取地理位置