最近设计H5业务需求需要实现类似钉钉一样打卡获取当前定位得功能。反复研究了各大官网地图，这里分享一些经验，和遇到得问题。
首先是高德地图api，都说高德地图获取到得定位比较准确，但是在使用高德地图api的时候，发现高德地图现在通过官网提供的"AMap.Geolocation",插件根本获取不到精准定位。获取到的经纬度也是有偏差的，后来查阅很多资料才看到，现在的高德一个办法根本获取不到详细信息，还需要再调用别的方法。(有兴趣的小伙伴可以自己研究)
这里是高德地图我写的获取当前位置的方法。如果只是获取到当前城市的经纬度的话，这个是可以直接使用的。
温馨提醒：
1.记得再mounted里面去调用getLocation()方法
2.谷歌浏览器打开会报错，使用edge可以
3.使用本地路径是可以查看的。
使用地图的基本步骤就不说了，申请key去各大官网平台申请对应的key
我这里是用vue2写的
首先在html中引入cdn 记得要放在script 标签最前面。
这里是edge显示的返回结果
因为这个获取不到详细定位，又研究了一下百度地图的api，这里分享一下使用百度地图api 的时候遇到的一些问题。百度地图是可以获取到详细街道的，但是有局限，在浏览器上获取定位是不准确的，需要使用测试域名 跑到服务上，从手机端去看，但是有浏览器限制，在uc，夸克，百度app上可以获取到精确定位，苹果自带的safari 和部分安卓自带的浏览器仍然是获取不到的。
这里也上一下代码，小伙伴们根据需求合理使用、
首先也是引入cdn
代码片段，百度地图三种获取当前定位的方法
这里是打印结果。在谷歌上只显示一种ip定位的结果，当然也是有误差的结果
下面是edge的打印结果，可以看到在pc浏览器上三种方法都打印出来了。但是这里显示的是有偏差的结果。
这里是详细信息，可以看到，浏览器定位跟开启sdk定位获取到的位置是一样的。但是同一个地址，ip定位和浏览器，sdk都有误差。
百度地图的详细信息是出来了，但是在pc端仍然是有问题的。但是使用测试地址发布在移动端通过浏览器和sdk是可以获取当详细地址并且能展现出来的，这里我因为用的是本地，就没办法给发打印结果了。但是上面也说了。他是在部分浏览器上才可以打印出来结果，获取详细信息的。
上面高德和百度都有各自的缺陷，百度虽然获取到了，但是不符合业务需求，所以研究资料之后，我最后去看了，微信js-sdk ，在vue中调用微信的sdk 获取位置。最后把功能实现了。分享一下成功的办法吧。因为我使用的是vue的框架
首先在vue 中下载js-sdk 的node
1. npm i weixin-js-sdk 引入js-sdk
2.引入之后根据微信开发平台，请求后端接口获取参数。
3.调用wx-sdk方法。 使用wx-getLocation（）
4.获取到经纬度，然后根据腾讯地图cdn逆编码转换成详细地址。
代码如下：
记得还是在html中引入腾讯地图的cdn
我们的项目一个是在企业微信，一个是在小程序上线的，所以我还特地看了一下企业微信的文档，跟微信公众号是一样的方法。就不多说了。但是如果小伙伴们，在企业微信或者微信公众号测试得时候，如果碰到报错invalid url domain得问题，记得看一下企业微信或者公众号有没有配置你本地得接口域名。
最后，因为没有权限问题，成功得截图没有办法展现给大家，回头我会再补一下成功得图。