cordova定位 + 仿钉钉打卡功能
9503WEBcordova2018-08-20

最近在研究hybridApp,使用vue+cordova,现在需要实现一个钉钉打卡的功能
大致要实现这4个需求:地图显示、定位、地图覆盖效果、距离测量

定位

定位相对而言比较复杂所以优先考虑,关于定位,我尝试了3种办法

第一个尝试了cordova自带的插件,结果是报错:code:2,message:network provider is not available,原因是新版的插件已经删掉了关于Android版定位的代码,改为基于系统浏览器(chrome内核)进行定位,但经测试发现因为国内网络原因根本无法定位

第二个是用的高德地图的JavaScript API,定位虽然成功但是定位和实际位置有几百米的误差这个肯定不行

第三个是用的cordova的baidumaplocation插件,误差在几十米之间还可以接受

首先附上插件github的连接

第一步你得先去百度创建一个应用

创建android应用签名文件/查看SHA1

开发版本

1
2
3
4
5
cd .android 进入  C:\Users\FLTD-Y01\.android>

调试版本使用debug.keystore,命令为:keytool -list -v -keystore debug.keystore。

提示输入密钥库密码,调试版本默认密码是: android

发布版本

1
2
建立签名文件
$ keytool -genkey -v -keystore key.keystore -alias key -keyalg RSA -validity 365

回车后会让你输入名字公司什么的,按照提示继续就好

执行完成后会在文件夹内创建一个key.keystore的签名文件

然后就能够看到md5、SHA1什么的了

1
2
查看签名信息
$ keytool -list -v -keystore key.keystore

安装baidumaplocation插件

1
2
3
安装baidumaplocation插件
$ cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="你的key" --variable IOS_KEY="value" --save
只需要Android端或者IOS端,可以只填写一个相应的key,另外一个你还是得填点什么,不然你懂的

炒鸡简单的用法上代码

1
2
3
4
5
$ baidumap_location.getCurrentPosition (function (result) {
$ console.log(JSON.stringify(result))
$ }, function (error) {
$ console.log(JSON.stringify(error))
$ })

温馨提示:只有在手机上才能获取比较准确的信息,所以最好真机测试

地图显示、覆盖物效果、距离计算

除了定位以外的其他功能我都用的是JavaScript API

那么第一步是去百度创建一个浏览器端类型的应用

然后你会得到一个key,然后在index引用百度地图API文件

1
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

最后上代码

1
2
3
4
5
6
7
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可以打卡,反之则是超出范围

关于报错

如果Android版获取到的信息是:
{
“locType”: 505,
“locTypeDescription”: “NetWork location failed because baidu location service check the key is unlegal, please check the key in AndroidManifest.xml !”,
“latitude”: 5e-324,
“longitude”: 5e-324,
“radius”: 0,
“userIndoorState”: -1,
“direction”: -1
}
这个坑我是踩了,不管你信息是否获取成功过,只要出现了上面的信息就说明Key有问题

  • 检查第一步创建的百度Android应用
  • 检查下生成的AndroidManifest.xml文件里面是否有如下信息
    1
    2
    3
    <service android:enabled="true" android:name="com.baidu.location.f" android:process=":remote">
    </service>
    <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="abcdefghijklmn" />

然后重新安装

欢迎留言交流  (´▽`ʃ♡ƪ)