淺談Vue下使用百度地圖的簡易方法
更新時間：2018年03月23日 16:05:35 作者：ziclee
本篇文章主要介紹了淺談Vue下使用百度地圖的簡易方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue下使用百度地圖的簡易方法，分享給大家，具體如下：
最近的項目里面，需要用到將具體地址轉換成百度坐標系的經緯度，需求比較簡單，所以就沒有采用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();
// 地址轉換成坐標系
myGeo.getPoint('北京市海淀區(qū)上地10街10號', function (point) {
if (point) {
console.log(point);
}
},
'北京市');
}
},
mouted () {
this.loadBMapScript();
window['bMapInit'] = () => {
this.qeuryLocation();
};
}
}
至此，就能夠開始正常的使用百度地圖了。
按照官方文檔寫的代碼報了以下圖示的錯：
經過多方考察最終發(fā)現(xiàn)造成這個的原因是頁面加載順序導致的，這點在官網上也有提示，詳細請查看官方文檔
由于我用的是vue2.0，所以我是在mounted方法中調用的以下兩個方法：
var map = new BMap.Map("container"); //創(chuàng)建地圖實例，注意在調用此構造函數(shù)時應確保容器元素已經添加到地圖上
var point = new BMap.Point(116.404, 39.915); //創(chuàng)建點坐標， 地圖必須經過初始化才可以執(zhí)行其他操作
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了Vue利用canvas實現(xiàn)移動端手寫板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本文主要介紹了vue中使用typescript配置，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
詳解Vue-cli3 項目在安卓低版本系統(tǒng)和IE上白屏問題解決
這篇文章主要介紹了Vue-cli3 項目在安卓低版本系統(tǒng)和 IE 上白屏問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue實現(xiàn)點擊選中取消切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue如何解決空格和空行報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了iview tabs 頂部導航欄和模塊切換欄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Vue3封裝 Message消息提示實例函數(shù),具有一定的實用價值,需要的朋友可以參考下，希望能夠給你帶來幫助2021-09-09
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了詳解如何用VUE寫一個多用模態(tài)框組件模版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue實例的一些簡單方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01