您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue中如何使用百度地圖”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中如何使用百度地圖”這篇文章吧。
Vue下使用百度地圖的簡易方法,具體如下:
最近的項目里面,需要用到將具體地址轉(zhuǎn)換成百度坐標(biāo)系的經(jīng)緯度,需求比較簡單,所以就沒有采用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號', function (point) { if (point) { console.log(point); } }, '北京市'); } }, mouted () { this.loadBMapScript(); window['bMapInit'] = () => { this.qeuryLocation(); }; } }
至此,就能夠開始正常的使用百度地圖了。
按照官方文檔寫的代碼報了以下圖示的錯:
經(jīng)過多方考察最終發(fā)現(xiàn)造成這個的原因是頁面加載順序?qū)е碌?,這點在官網(wǎng)上也有提示,詳細(xì)請查看官方文檔
由于我用的是vue2.0,所以我是在mounted方法中調(diào)用的以下兩個方法:
var map = new BMap.Map("container"); //創(chuàng)建地圖實例,注意在調(diào)用此構(gòu)造函數(shù)時應(yīng)確保容器元素已經(jīng)添加到地圖上 var point = new BMap.Point(116.404, 39.915); //創(chuàng)建點坐標(biāo), 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作
以上是“Vue中如何使用百度地圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。