关于在vue2.X中使用高德地图api获取用户定位

最近开发的MOA考试端需要获取到当前考试用户的定位，公司没有自己的定位组件，所以需要接入高德地图api

废话不多说，直接上操作步骤。

1.首先上高德地图API的官网，高德地图API官网，

跟着以上的步骤一步步注册，注意也是选web端

2.点击页面左侧的侧边栏的定位

3.因为是vue，所以我们的写法肯定会不同一些，直接上代码，封装一个方法，如果项目存在eslint的话，可以用// eslint-disable-line去忽略掉，我们这样是异步引入，其实不会存在报错的情况了

export function MapLoader() {
    let aMapScript = document.createElement('script')
    aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=自己的key&plugin=AMap.CitySearch')
    document.head.appendChild(aMapScript)
    return aMapScript.onload = function() {
        AMap.plugin('AMap.Geolocation', function() { // eslint-disable-line
            var geolocation = new AMap.Geolocation({ // eslint-disable-line
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20), // eslint-disable-line
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })
 
            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete) // eslint-disable-line
            AMap.event.addListener(geolocation, 'error', onError) // eslint-disable-line
 
            function onComplete(data) {
                // data是具体的定位信息
                console.log(data)
                console.log('123123')
            }
 
            function onError(data) {
                console.log(data)
                    // 定位出错
                console.log('123123s')
            }
        })
    }
}

值得注意的一点就是公司内网是否会阻断请求的发送，在这里踩了很多坑，并且pc端是拿不到这个定位的，需要用真的手机去测试，拿到的定位坐标其实可能是这样的，不像网上其他方法可以直接拿到地址，其中lat和lng就是偏移后的定位，然后我们用高德的web服务api拿到真正的经纬定位

{
...
position:{
  Q:30.xxxxxx,
  R:120.xxxxxx,
  lat:30.xxxxxx,
  lng:120.xxxxxx
  }
}

接下来还需要再申请一个web服务的Key，注意了，跟刚才那个web端的key是不一样的

申请好了后，我们点进这个坐标转换

https://restapi.amap.com/v3/assistant/coordinate/convert?locations=刚才拿到的lng,刚才拿到的lat&coordsys=gps&output=xml&key=<用户的key>
// 这样就可以获取到真实的没有偏移过的定位坐标了

这样我们就有了真实的经纬坐标了，然后我们还需要再调用逆地理接口

https://restapi.amap.com/v3/geocode/regeo?output=xml&location=真实的lng,真实的lat&key=<用户的key>&radius=1000&extensions=all

到此，我们就获取到了用户的真实定位了！其实很简单的吧