vue集成腾讯地图实现打卡功能
2020-10-26 本文已影响0人
卖手机的程序猿
效果图
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>
在template插入如上代码用于渲染地图
在data里定义如上变量
在mounted里处初始化地图和获取地图实时位置变化
实时监听位置变化
初始化地图
根据两点计算半径，用于判断是否在打卡范围内
打卡按钮
打卡业务逻辑
打卡业务逻辑
