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, // 定位按鈕的??课恢玫钠屏?,默認(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-09vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析
這篇文章主要介紹了vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(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à)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07詳解Vue里循環(huán)form表單項(xiàng)實(shí)例
本文主要介紹了Vue里循環(huán)form表單項(xiàng)實(shí)例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08