使用腾讯位置服务进行 Web 前端定位

字数统计: 849阅读时长: 3 min

 2021/03/16

正在开发的 Web 项目需要获取使用者的位置信息，而使用者主要通过移动端访问此 Web 服务。位置信息需要精确到区。在腾讯位置服务的定位解决方案里想要搜索可用的 JavaScript 库，只看到了服务端的 IP 定位和移动端的几个 SDK 包，甚异之。

终于在不起眼的地方找到了前端定位组件，适用于浏览器进行定位操作。

本文基于 Nuxt.js 实现前端定位功能。

它能做什么

组件旨在优化纯 HTML5 Geolocation 定位能力弱，定位成功率不高的问题，提供简单、易用的接口帮助业务层获取用户当前的位置信息（需用户授权），以降低开发成本，提升定位精准度。

除了常规的经纬度坐标以外，它返回的结果里还包含了 city 和 district 项，非常方面。

{
  "module": "geolocation",
  "type": "h5_watch",
  "adcode": "", //行政区 ID，六位数字, 前两位是省，中间是市，后面两位是区，比如深圳市 ID 为 440300
  "nation": "美国",
  "province": "",
  "city": "加利福尼亚州",
  "district": "洛杉矶县",
  "addr": "",
  "lat": 34.035244, //火星坐标 (gcj02)，腾讯、Google、高德等地图通用
  "lng": -118.252207,
  "accuracy": 1441 //误差范围，以米为单位
}

可惜相关页面的最后一次更新最近可能是在 2016-02-23，文档撰写简陋不堪，只能在项目中慢慢试错使用。

引入前端定位组件库

首先需要在腾讯位置服务的控制台添加应用，获得应用的 key。

这里选择使用前端定位组件的调用方式三。

在 HTML 文件的中引入脚本，对应 Nuxt.js 应用中的 nuxt.config.js：

// nuxt.config.js
export default {
  head: {
    script: [
      {
        type: "text/javascript",
        // 引入腾讯地图前端定位组件
        // YOUR-APP-KEY 即腾讯位置服务应用的 key
        // YOUR-APP-NAME 即腾讯位置服务应用的名称
        src: "https://apis.map.qq.com/tools/geolocation/min?key=YOUR-APP-KEY&referer=YOUR-APP-NAME",
      },
    ],
  },
};

如果获取脚本失败，请关闭浏览器中拦截广告的插件等。

此外，由于用户的位置信息属于敏感信息，因此需要使用 HTTPS 的网页发送请求；如果在本机开发，请使用 localhost:port 的形式开发和访问。

实现 Web 前端定位

编写代码如下：

const geolocation = new qq.maps.Geolocation();

geolocation.getLocation(
  (position) => {
    // 成功获取位置信息
    console.log(position);
    // 将位置信息序列化存储在 localStorage 中
    const currentLocation = {
      city: position.city,
      district: position.district,
    };
    localStorage.currentLocation = JSON.stringify(currentLocation);
  },
  (error) => {
    // 获取位置信息失败
    console.log(error);
  },
);

执行代码，得到结果如下（其中 * 为我手动打码）：

{
  "module": "geolocation",
  "type": "h5",
  "adcode": "510117",
  "nation": "中国",
  "province": "四川省",
  "city": "成都市",
  "district": "郫都区",
  "addr": "***",
  "lat": 30.75****,
  "lng": 103.92****,
  "accuracy": 113
}