cordova定位 + 仿钉钉打卡功能

9503WEBcordova2018-08-202024-12-07

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

定位

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

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

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

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

首先附上插件github的连接

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

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

开发版本

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，另外一个你还是得填点什么，不然你懂的

炒鸡简单的用法上代码

$ 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>

最后上代码

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" />

然后重新安装

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