uniapp小程序实战之利用腾讯地图获取定位

前言

本篇文章分享一下我在实际开发小程序时遇到的需要获取用户当前位置的问题，在小程序开发过程中经常使用到的获取定位功能。uniapp官方也提供了相应的API供我们使用。

官网地址：uni.getLocation(OBJECT))

1、首先看官网

uni.getLocation(OBJECT)

获取当前的地理位置、速度。

OBJECT 参数说明

success 返回参数说明

address 地址信息说明

示例

uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
	}
});

#注意

H5 平台

• 在较新的浏览器上，H5 端获取定位信息，要求部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
• 国产安卓手机上，H5若无法定位，检查手机是否开通位置服务、GPS，ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
• 安卓手机 在原生App内嵌H5时，无法定位需要原生App处理Webview。
• 移动端浏览器 普遍仅支持GPS定位，在GPS信号弱的地方可能定位失败。
• PC 设备 使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
• 微信公众号可使用微信js sdk，详见
• 2.9.9 版本以上，优化 uni.getLocation 支持通过 IP 定位。默认通过 GPS 获取，如果获取失败，备选方案是通过 IP 定位获取，需填写三方地图服务平台的秘钥（key）。key配置：manifest.json —> H5配置 —> 定位和地图 —> key。

App 平台

• Android由于谷歌服务被墙，或者手机上没有GMS，想正常定位就需要向高德等三方服务商申请SDK资质，获取AppKey。否则打包后定位就会不准。云打包时需要在manifest的SDK配置中填写 Appkey。在 manifest 可视化界面有详细申请指南，详见：https://ask.dcloud.net.cn/article/29。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。真机运行可以正常定位，是因为真机运行基座使用了DCloud向高德申请的sdk配置，打包后必须由开发者自己申请。如果手机自带GMS且网络环境可以正常访问google定位服务器，此时无需在 manifest 填写高德定位的 sdk 配置。
• 注意手机自身要开启定位、同时要给App赋予定位权限。权限判断可参考：https://uniapp.dcloud.net.cn/api/system/getappauthorizesetting.html
• <map> 组件默认为国测局坐标 gcj02，调用 uni.getLocation 返回结果传递给 <map> 组件时，需指定 type 为 gcj02。
• 定位 和 map 是两个东西。通过 getLocation 得到位置坐标后，可以在任意map地图上展示，比如定位使用高德，地图使用 google 的 webview 版地图。如果坐标系不同时，注意转换坐标系。
• 如果使用 web-view 加载地图，无需在manifest里配地图的sdk配置。
• 持续定位方案：iOS端可以申请持续定位权限，参考。Android如果进程被杀，代码无法执行。可以使用 unipush ，通过服务器激活App，执行透传消息，让App启动然后采集位置。Android上，即使自己写原生插件做后台进程，也很容易被杀，unipush是更合适的方案
• 3.3.0 版本以上 优化系统定位模块，可不使用三方定位SDK的进行高精度定位，具体参考：系统定位。

小程序平台

• api默认不返回详细地址中文描述。需要中文地址有2种方式：1、使用高德地图小程序sdk，在app和微信上都可以获得中文地址，参考。2、只考虑app，使用plus.geolocation也可以获取中文地址。manifest里的App SDK配置仅用于app，小程序无需在这里配置。
• 可以通过用户授权API来判断用户是否给应用授予定位权限，详见
• 在 微信小程序 中，当用户离开应用后，此接口无法调用，需要申请 后台持续定位权限 ，另外新版本中需要使用 wx.onLocationChange 监听位置信息变化；当用户点击“显示在聊天顶部”时，此接口可继续调用

补充： 以上内容为 官方文档 搬运过来的，详情可点击链接跳转至官网。

我们本次开发的是小程序，需要注意的是，我们本次小程序获取定位使用的是腾讯位置服务，所以需要申请腾讯位置服务的SDK。

2、腾讯位置服务平台申请密钥和下载SDK

申请步骤：详细文档

2.1 申请开发者秘钥

点击文档中的申请秘钥链接，跳转至腾讯位置服务平台，如下图所示申请即可。（没有账号的先注册账号）

2.2 开通webserviceAPI服务

开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

1、申请Key

2、复制申请好的Key值等待使用

2.3 下载微信小程序JavaScriptSDK

微信小程序JavaScriptSDK下载地址（点击文字即可跳转）

下载好解压完成后，我们一般放在根目录下面的common目录下（如下图）

2.4 安全域名设置

安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

到这里终于算是申请完了，在配置一下就好了。

3、配置manifest.json文件

 "permission" : {
	 "scope.userLocation" : {
	     "desc" : "为了您更好的体验，请确认获取您的位置"
	 }
}	
 "requiredPrivateInfos": ["getLocation", "chooseLocation"]

4、示例代码展示

4.1 引用下载好的SDK

这里我放到了common目录下：

import QQMapWX from "../../common/qqmap-wx-jssdk.js"

4.2 获取定位函数示例

methods: {
	//获取位置信息
  async getLocationInfo() {
    return new Promise((resolve) => {
      //位置信息默认数据
      let location = {
        longitude: 0,
        latitude: 0,
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
      };
      uni.getLocation({
        type: "gcj02",
        success(res) {
          location.longitude = res.longitude;
          location.latitude = res.latitude;
          // 腾讯地图Api
          const qqmapsdk = new QQMapWX({
            key: 'XXXXXXXXXXXXXXXXXXXXXXXX'  //这里填写自己申请的key
          });
          qqmapsdk.reverseGeocoder({
            location,
            success(response) {
              let info = response.result;
        	  console.log(info);
              location.province = info.address_component.province;
              location.city = info.address_component.city;
              location.area = info.address_component.district;
              location.street = info.address_component.street;
              location.address = info.address;
              resolve(location);
            },
          });
        },
        fail(err) {
			console.log(err)
          resolve(location);
        },
      });
    });
  }
 }

4.3 调用函数

函数调用可以自己去选择在页面加载的时候加载，或者有一个触发条件。（我是用的页面加载，所以放在了onload方法中）。

async onLoad() {
	const location = await this.getLocationInfo();
	this.position = location.address
},

注意：这里使用的this.position，是在data中定义的，代码示例中没有写。需要自己在data方法中定一个position变量

4.4 页面渲染

<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">
	当前定位：{{position}}
</view>

5、效果展示

到这里就结束啦！想要的获取用户位置信息的功能就实现啦。

总结