VUE中如何調用高德地圖獲取當前位置(VUE2.0和3.0通用)
1、去高德開放平臺獲取高德地圖KEY
注意:這里一定要選擇WEB端的KEY,不要選擇WEB服務的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, // 設置定位超時時間,默認:無窮大 timeout: 10000, // 定位按鈕的??课恢玫钠屏浚J:Pixel(10, 20) buttonOffset: new AMap.Pixel(10, 20), // 定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見,默認: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、打印結果
一個簡單、但是穩(wěn)定性稍差的方法
總結
到此這篇關于VUE中如何調用高德地圖獲取當前位置的文章就介紹到這了,更多相關VUE調用高德地圖獲取當前位置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺管理系統(tǒng)的開發(fā)中,都會遇到很多table,但每一次都去引入el-table就會導致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關于Element?Plus組件Form表單Table表格二次封裝的相關資料,需要的朋友可以參考下2022-09-09關于vue 結合原生js 解決echarts resize問題
這篇文章主要介紹了關于vue 結合原生js 解決echarts resize問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05