Lolipop's Studio.

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

字数统计: 849阅读时长: 3 min
2021/03/16

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

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

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

它能做什么

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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 前端定位

编写代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
}
);

执行代码,得到结果如下(其中 * 为我手动打码):

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"module": "geolocation",
"type": "h5",
"adcode": "510117",
"nation": "中国",
"province": "四川省",
"city": "成都市",
"district": "郫都区",
"addr": "***",
"lat": 30.75****,
"lng": 103.92****,
"accuracy": 113
}

定位成功精确到当前我所处的区和地址,满足项目开发要求。

其它相关方法和说明敬请参考官方文档的“暗示”。

CATALOG
  1. 1. 它能做什么
  2. 2. 引入前端定位组件库
  3. 3. 实现 Web 前端定位