淺談Vue下使用百度地圖的簡(jiǎn)易方法
Vue下使用百度地圖的簡(jiǎn)易方法,分享給大家,具體如下:
最近的項(xiàng)目里面,需要用到將具體地址轉(zhuǎn)換成百度坐標(biāo)系的經(jīng)緯度,需求比較簡(jiǎn)單,所以就沒有采用GitHub里面的百度Vue插件。
廢話不說,直接貼出代碼:
引入:在需要用到百度地圖的組件里面直接引入
export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.baidu.com/api?v=3.0&ak=你的akKey&callback=bMapInit'; document.body.appendChild(script); }, qeuryLocation () { let myGeo = new BMap.Geocoder(); // 地址轉(zhuǎn)換成坐標(biāo)系 myGeo.getPoint('北京市海淀區(qū)上地10街10號(hào)', function (point) { if (point) { console.log(point); } }, '北京市'); } }, mouted () { this.loadBMapScript(); window['bMapInit'] = () => { this.qeuryLocation(); }; } }
至此,就能夠開始正常的使用百度地圖了。
按照官方文檔寫的代碼報(bào)了以下圖示的錯(cuò):
經(jīng)過多方考察最終發(fā)現(xiàn)造成這個(gè)的原因是頁面加載順序?qū)е碌?,這點(diǎn)在官網(wǎng)上也有提示,詳細(xì)請(qǐng)查看官方文檔
由于我用的是vue2.0,所以我是在mounted方法中調(diào)用的以下兩個(gè)方法:
var map = new BMap.Map("container"); //創(chuàng)建地圖實(shí)例,注意在調(diào)用此構(gòu)造函數(shù)時(shí)應(yīng)確保容器元素已經(jīng)添加到地圖上 var point = new BMap.Point(116.404, 39.915); //創(chuàng)建點(diǎn)坐標(biāo), 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue利用canvas實(shí)現(xiàn)移動(dòng)端手寫板的方法
本篇文章主要介紹了Vue利用canvas實(shí)現(xiàn)移動(dòng)端手寫板的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05詳解Vue-cli3 項(xiàng)目在安卓低版本系統(tǒng)和IE上白屏問題解決
這篇文章主要介紹了Vue-cli3 項(xiàng)目在安卓低版本系統(tǒng)和 IE 上白屏問題解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04vue如何實(shí)現(xiàn)點(diǎn)擊選中取消切換
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊選中取消切換,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Vue3封裝 Message消息提示實(shí)例函數(shù)詳解
這篇文章主要介紹了Vue3封裝 Message消息提示實(shí)例函數(shù),具有一定的實(shí)用價(jià)值,需要的朋友可以參考下,希望能夠給你帶來幫助2021-09-09vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09