本文示例基于腾讯地图所实现的一个在有的业务开发中会用到的功能:地图中实现定位签到, 使用地图的签到功能,在业务中实现的一些功能有:考勤签到,活动办理打卡点定位签到,判断某个目标是否在当前设置的范围内从而实现一些业务要求等功能。
现在有很多方式可以实现该功能,不管是app,小程序或者是h5端,前提都是基于第三方的地图提供的定位做实现,先上一张大概的效果图如下:
从图中可以看到,位置点标记的为当前用户所处的位置,也就是用户当前所在的真实位置,在图中还标记着签到点,签到点为用户所标记需要签到的地点,该标记点中标有签到范围。
当用户定位进入该打卡签到范围内时,即可进行相关的业务操作。
如何判断用户是否在当前位置,就首先需要进行计算用户所在的位置点离目标点的距离,再通过用户设置的签到距离判断是否能够进行签到。
具体实现提供的源码,可参考下载:
pan.baidu.com/s/1OCEf4Bj3… 提取码: i8w9
该案例基于腾讯地图与vue实现,若是使用其它框架,作出对应更改即可,所使用的第三方提供的功能在不同框架下都是通用的
好了,以上就是实现该功能的全部内容和源码下载,如果想查看该文章具体信息与问题交流,欢迎关注公众前端充电社,如果觉得有帮助,欢迎点个关注!