最近開發的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-linevar geolocation = new AMap.Geolocation({ // eslint-disable-line// 是否使用高精度定位，默認：trueenableHighAccuracy: true,// 設置定位超時時間，默認：無窮大timeout: 10000,// 定位按鈕的?？课恢玫钠屏?#xff0c;默認：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20), // eslint-disable-line// 定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：falsezoomToAccuracy: true,// 定位按鈕的排放位置, RB表示右下buttonPosition: 'RB'})geolocation.getCurrentPosition()AMap.event.addListener(geolocation, 'complete', onComplete) // eslint-disable-lineAMap.event.addListener(geolocation, 'error', onError) // eslint-disable-linefunction 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

到此，我們就獲取到了用戶的真實定位了！其實很簡單的吧

總結

以上是生活随笔為你收集整理的关于在vue2.X中使用高德地图api获取用户定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。