由于项目需求需要在项目中实现手机端（基于网页）考勤打卡功能，最初考虑使用H5自身定位功能，但尝试过后，效果很不稳定。然后尝试使用百度地图JsAPI，百度家的稳定倒是很稳定，没想到的是定位位置和实际位置居然相差几十公里，一开始是以为自己配置有问题，浪费了我大半天时间去找原因，最后发现他本身提供的API就是偏差很大距离的，他自己家的倒是定位很准，对外开放的API简直惨不忍睹。

百度API浏览器定位

高德API浏览器定位

然后换用高德去测试，高德开放的API精确度和百度地图是一样的，小伙伴可以亲自去体验下，难怪百度如今沦落到这样。。。

所以就决定使用高德API来进行定位了；

主要思路：利用高德API获取当前位置经纬度、设置考勤点经纬度、计算两点距离判断是否在考勤范围内。

高德JS API提供的浏览器定位接口，融合了HTML5 Geolocation定位接口、精确IP定位服务，以及安卓定位sdk定位。所以在定位上大大提高了精准度以及成功率。

效果如下：

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

HTML

2. 添加div标签作为地图容器，同时为该div指定id属性；

HTML

3. 为地图容器指定高度、宽度；

CSS

4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

HTML

5. 在完成如上准备工作之后便可以开始进行开发工作了。

由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。