淺談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è)的原因是頁(yè)面加載順序?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構(gòu)建多頁(yè)面應(yīng)用的示例
這篇文章主要介紹了使用vue構(gòu)建多頁(yè)面應(yīng)用的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能
經(jīng)常遇到這樣的需求，移動(dòng)端中的導(dǎo)航并不是在頂部也不是在底部，而是在最底部且是固定的，當(dāng)我們點(diǎn)擊該導(dǎo)航項(xiàng)時(shí)會(huì)切換到對(duì)應(yīng)的組件。這篇文章主要介紹了移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能,需要的朋友可以參考下2019-06-06
關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這次給大家?guī)?lái)vue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項(xiàng)有哪些？本文通過實(shí)戰(zhàn)案例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-09-09
這篇文章主要介紹了Vue3的vue-router超詳細(xì)使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
VUE 解決mode為history頁(yè)面為空白的問題
今天小編就為大家分享一篇VUE 解決mode為history頁(yè)面為空白的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
vue-router 基于后端permissions動(dòng)態(tài)生成導(dǎo)航菜單的示例代碼
本文主要介紹了vue-router 基于后端permissions動(dòng)態(tài)生成導(dǎo)航菜單的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
今天小編就為大家分享一篇vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
Vue實(shí)現(xiàn)商品分類菜單數(shù)量提示功能
這篇文章主要介紹了Vue實(shí)戰(zhàn)—商品分類菜單數(shù)量提示功能，本文通過項(xiàng)目實(shí)戰(zhàn)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07