vue集成腾讯地图实现打卡功能

效果图

---

1、 在public/index.html引入腾讯地图jssdk

<script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

腾讯地图jssdk官方文档

---

在template插入如上代码用于渲染地图 在data里定义如上变量 在mounted里处初始化地图和获取地图实时位置变化 实时监听位置变化 初始化地图 根据两点计算半径，用于判断是否在打卡范围内 打卡按钮 打卡业务逻辑 打卡业务逻辑