VUE中如何調(diào)用高德地圖獲取當(dāng)前位置(VUE2.0和3.0通用)
1、去高德開放平臺(tái)獲取高德地圖KEY
注意:這里一定要選擇WEB端的KEY,不要選擇WEB服務(wù)的KEY,否則拿不到數(shù)據(jù)
2、去項(xiàng)目中引入KEY,也就是CDN,在這里我們在SRC下面創(chuàng)建一個(gè)UNTI文件夾,然后在到文件夾下面創(chuàng)建一個(gè)名為UNTI.JS的文件
3、在UNTI.JS中寫入我們的方法封裝
注意:這里之所以不在INDEX.HTML中引入,是因?yàn)槿绻贗NDEX.HTML引入,匯報(bào)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({
// 是否使用高精度定位,默認(rèn):true
enableHighAccuracy: true,
// 設(shè)置定位超時(shí)時(shí)間,默認(rèn):無窮大
timeout: 10000,
// 定位按鈕的??课恢玫钠屏浚J(rèn):Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見,默認(rèn):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)
// 定位出錯(cuò)
console.log('123123s')
}
})
}
}4、在需要引用的該方法
5、打印結(jié)果

一個(gè)簡單、但是穩(wěn)定性稍差的方法
總結(jié)
到此這篇關(guān)于VUE中如何調(diào)用高德地圖獲取當(dāng)前位置的文章就介紹到這了,更多相關(guān)VUE調(diào)用高德地圖獲取當(dāng)前位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺(tái)管理系統(tǒng)的開發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析
這篇文章主要介紹了vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
關(guān)于vue 結(jié)合原生js 解決echarts resize問題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
詳解Vue里循環(huán)form表單項(xiàng)實(shí)例
本文主要介紹了Vue里循環(huán)form表單項(xiàng)實(shí)例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08

