最近研究了一下钉钉打卡的功能，大致要实现这4个需求：地图显示、定位、地图覆盖效果、距离测量
背景是一个hybridApp，用的是cordova打包
定位
定位相对而言比较复杂所以优先考虑，关于定位，我尝试了3种办法
第一个尝试了cordova自带的插件，结果是报错：code：2，message：network provider is not available，原因是新版的插件已经删掉了关于Android版定位的代码，改为基于系统浏览器(chrome内核)进行定位，但经测试发现因为国内网络原因根本无法定位
第二个是用的高德地图的JavaScript API，定位虽然成功但是定位和实际位置有几百米的误差这个肯定不行
第三个是用的cordova的baidumaplocation插件，误差在几十米之间还可以接受
首先附上github的连接https://github.com/aruis/cordova-plugin-baidumaplocation
第一步你得先去百度http://lbsyun.baidu.com/apiconsole/key创建一个应用
创建android应用签名文件然后查看SHA1
cmd命令：keytool -genkey -v -keystore key.keystore -alias key -keyalg RSA -validity 365
回车后会让你输入名字公司什么的，按照提示继续就好
执行完成后会在文件夹内创建一个key.keystore的签名文件
然后查看签名信息cmd命令：keytool -list -v -keystore key.keystore
然后就能够看到md5、SHA1什么的了
安装baidumaplocation插件
cmd命令：cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY='你的key' --variable IOS_KEY='value' --save
只需要Android端或者IOS端，可以只填写一个相应的key，另外一个你还是得填点什么，不然你懂的
炒鸡简单的用法上代码
baidumap_location.getCurrentPosition(function (result) {
console.log(JSON.stringify(result))
}, function (error) {
console.log(JSON.stringify(error))
})温馨提示：只有在手机上才能获取比较准确的信息，所以最好真机测试
地图显示、覆盖物效果、距离计算
除了定位以外的其他功能我都用的是JavaScript API
那么第一步是去百度http://lbsyun.baidu.com/apiconsole/key创建一个浏览器端类型的应用
然后你会得到一个key，然后在index引用百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>最后上代码
that.bmap = new BMap.Map("allmap") // 新建地图实例
let location = new BMap.Point(enterprise1, enterprise2) // 新建坐标，参数为企业坐标
that.bmap.centerAndZoom(location, 16) //设置企业坐标为中心点坐标
let circle = new BMap.Circle(location, 500, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}) // 创建地图圆形覆盖效果
that.bmap.addOverlay(circle) // 增加效果
let pointB = new BMap.Point(result.longitude, result.latitude) // 新建点坐标，参数为定位获取到的坐标
console.log((that.bmap.getDistance(location, pointB)).toFixed(2)) // 计算距离，小于500可以打卡，反之则是超出范围若对你有帮助或喜欢本文请点赞 o(￣▽￣)ｄ
如有不足、需要改善或者还能优化的地方欢迎指出，不胜感激，欢迎留言交流 (´▽`ʃ♡ƪ)