快捷導航

VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)

更新時間：2023年04月10日 09:06:56 作者：dancingwu

使用uniapp開發(fā)微信小程序時,多多少少會遇到獲取當前位置的詳細信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下

1、去高德開放平臺獲取高德地圖KEY

地址：https://lbs.amap.com/

注意：這里一定要選擇WEB端的KEY，不要選擇WEB服務(wù)的KEY，否則拿不到數(shù)據(jù)

2、去項目中引入KEY，也就是CDN，在這里我們在SRC下面創(chuàng)建一個UNTI文件夾，然后在到文件夾下面創(chuàng)建一個名為UNTI.JS的文件

3、在UNTI.JS中寫入我們的方法封裝

注意：這里之所以不在INDEX.HTML中引入，是因為如果在INDEX.HTML引入，匯報AMAP NOT UNDEFINED或者是找不到

export default function MapLoader() {
    let aMapScript = document.createElement('script')
    aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=c0af2a8bee25c16d7a307124ddb43056&plugin=AMap.CitySearch')
    document.head.appendChild(aMapScript)
    return aMapScript.onload = function() {
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默認：true
                enableHighAccuracy: true,
                // 設(shè)置定位超時時間，默認：無窮大
                timeout: 10000,
                // 定位按鈕的?？课恢玫钠屏?，默認：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見，默認：false
                zoomToAccuracy: true,
                //  定位按鈕的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })
 
            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)
 
            function onComplete(data) {
                // data是具體的定位信息
                console.log(data)
                console.log('123123')
            }
 
            function onError(data) {
                console.log(data)
                    // 定位出錯
                console.log('123123s')
            }
        })
    }
}

4、在需要引用的該方法

5、打印結(jié)果