需求背景
显而易见打卡功能是前端需求中一个常见的功能,我们是基于腾讯地图来实现的该业务场景.
实现思路
实现步骤很简单使用Geolocation.watchPosition()方法来动态的获取当前设备的位置信息,将获取的经纬度传递至后台接口,由后台接口根据当前位置信息判断是否可以进行打卡.
实现步骤
1.开启实时获取当前位置信息:
这部分逻辑倒是很简单，只是有两个注意的点:
-
在http环境下获取当前位置信息会有限制所以在测试测时候会特别麻烦，因为浏览器对于不安全域的限制，导致我们无法通过watchPosition方法获取当前位置信息,我的解决办法是通过mkcert工具生成受信任的SSL证书.解决局域网本地https访问的问题.
-
调用watchPositon方法后会增加手机电量与性能的消耗,当需要不需要时,及时销毁;watchPositon提供了options参数可以传递enableHighAccuracy:true来提高定位的精准度,也可以通过options参数设置定位缓存来平衡定位经度和电量消耗,这可以根据你的实际情况自由搭配.
2.将当前的定位信息返回至后台接口由后端接口判断是否在打卡范围：
就是将获取的经纬度当做参数发送至后端就可以,但是由于我们使用是Geolocation.watchPosition()方法，而项目中统一关于位置服务这块都是用使用腾讯来做的。这涉及到一个经纬度加密的问题,由watchPosition获取的坐标是WGS84坐标系,而腾讯地图使用的是GCJ02(WGS84加密后的坐标系,也称为火星坐标系),当前还有其他坐标系,大家可以自行翻阅资料,这里有一个坐标系转换工具大家有需要可以自取.当然在项目中我们是不可以通过这个工具来进行转换的,我们可以通过腾讯地图提供的API来进行转换将WGS84坐标系转换为GCJ02坐标系然后发送至后端.其实腾讯地图是提供了qq.maps.Geolocation中的watchPosition的方法实时获取当前位置信息的服务的,使用这个API,获取的坐标系直接就是GCJ02坐标系可以直接使用,还不用来回转坐标系,方便又实用;那大家可能要问你当时为什么不使用腾讯提供的呐?我当时不知道有这个API,在这里建议大家使用第三方自带的API...
3.之后就是根据后端返回的当前的打卡状态来进行相应的业务实现了:
其实使用Geolocation.watchPosition,在回调函数中请求接口判断是否符合在打卡范围是要进行一个节流的操作的,不然请求太频繁了，根据实际业务场景来自行决定节流的时间,但是你如果使用第三的API的话他可以给你提供该操作,比如腾讯地图的服务进行如下操作来决定获取当前位置信息的频率。
// 创建一个 Geolocation 实例
const geolocation = new qq.maps.Geolocation("your_key_here");
// 设置自动更新位置信息的间隔时间（单位为毫秒）
geolocation.setInterval(5000);
// 获取当前位置信息
geolocation.watchPosition(function(position) {
console.log("当前位置：", position); }, function(error) { console.log("获取位置信息失败：",error); });
影响定位精准度因素
因为我们这里是通过Geolocation.watchPosition()来获取当前位置信息的,我们要确定影响定位精度的因素首先要了解Geolocation.watchPosition()定位的基本原理:
浏览器通过调用设备的GPS模块或其他定位模块（如基站定位、WIFI定位等），获取设备当前所在位置的经纬度信息，并将获取到的位置信息返回给浏览器。
在调用 Geolocation.watchPosition() 时，可以设置一个回调函数，该回调函数会在获取到新的位置信息时被调用，可以将获取到的位置信息传递给该回调函数进行处理。通过设置回调函数，可以实现实时更新设备位置信息的功能。
影响精准度的原因:
- 天气：在恶劣的天气条件下，例如强风、暴雨等，会影响定位的准确度。
- 地形和建筑物：例如在山区、高楼林立的地方，信号可能会受到阻碍，导致定位不准确。
- 设备硬件：例如设备GPS芯片的精度和性能会影响定位准确度。
- 室内环境：室内的信号受到干扰，也会影响定位的准确性。
精准度通常以水平方向和垂直方向的误差半径表示，单位为米。一般来说，精准度误差半径越小，说明定位越准确。常见的误差半径范围在10到100米之间，但也会受到上述因素的影响而产生变化。
我在室内进行测试时定位半径精准度范围在20m~15m之间.
