cordova 定位 / 仿钉钉打卡功能

最近研究了一下钉钉打卡的功能,大致要实现这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创建一个应用

cordova 定位 / 仿钉钉打卡功能_第1张图片

创建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文件

最后上代码

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( ̄▽ ̄)d
如有不足、需要改善或者还能优化的地方欢迎指出,不胜感激,欢迎留言交流  (´▽`ʃ♡ƪ)

你可能感兴趣的:(定位,cordova定位,百度地图定位,仿钉钉考勤打卡,cordova)