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

2023-12-22 12:18| 来源: 网络整理| 查看: 265

最近开发的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= // 这样就可以获取到真实的没有偏移过的定位坐标了

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

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

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

【本文地址】

公司简介

联系我们