vue集成腾讯地图实现打卡功能
作者:
卖手机的程序猿 | 来源:发表于
2020-10-26 11:33 被阅读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>
腾讯地图jssdk官方文档

在template插入如上代码用于渲染地图

在data里定义如上变量

在mounted里处初始化地图和获取地图实时位置变化

实时监听位置变化

初始化地图

根据两点计算半径,用于判断是否在打卡范围内

打卡按钮

打卡业务逻辑

打卡业务逻辑
本文标题:vue集成腾讯地图实现打卡功能
本文链接:https://www.haomeiwen.com/subject/nucamktx.html
网友评论