这次搞这个定位打卡的功能搞的相对时间有点长,中间出现过很多问题,想把自己遇到的各种问题记录下来,涨涨经验。
> 在实现的过程中首先我用的是百度地图,通过hBuilder打包之后定位就不准确了,集成百度的sdk也没用,一样的不准确,我就想着使用H5+plus来定位,这个就不需要啥sdk配置了吧,那么麻烦。又看了下百度的经纬度使用的是自己二次封装过后的百度坐标系(BD-09),而plus定位的是火星坐标系(GCJ-02),所以我又改成使用高德地图,但是结果在打包的时候还是需要sdk,因为打包之后到手机上使用的是系统定位,跟我们通过真机测试的是不一样的。
所以下面是我使用高德地图和H5+ plus实现的定位打卡功能:
1、引入高德地图api,先渲染出高德地图(logo和版本号可以通过隐藏的方式实现)
2、通过plus方式定位,provider:amap 当提交云打包之后通过高德sdk进行定位,不然定位不准确
3、注册高德开发平台账号https://console.amap.com/dev/key/app,实名认证,最好直接使用公司的账号注册实名,公司账号权限更高,个人账号局限性多
4、注册好账号之后在我的应用中新建应用,并在对应的应用中添加各个服务平台的信息,可以添加web android ios平台信息,获取对应平台的key值,在引入高德地图的地方使用,对应平台使用对应key值
5、最后在hbuilder打包的时候配置下sdk信息,选择高德地图将对应的key填入,进行打包(注意打包的时候需要选择自有证书,包名以及sha1都要和生成的证书里面所填写的一致,否则定位不了)
具体代码实现:
1、初始化地图:
2、通过H5+plus定位:
3、页面中渲染地图,并将定位到的地点打点到地图中,并计算是否在设置的打卡点1公里范围内,只有在指定的打卡点1公里范围内才可以正常打卡:
上面的isRange为true就表示在打卡的距离范围内,就可以处理我们自己具体的打卡业务了。