淺談Vue下使用百度地圖的簡易方法

更新時間：2018年03月23日 16:05:35 作者：ziclee

本篇文章主要介紹了淺談Vue下使用百度地圖的簡易方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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ā)現造成這個的原因是頁面加載順序導致的，這點在官網上也有提示，詳細請查看官方文檔

由于我用的是vue2.0，所以我是在mounted方法中調用的以下兩個方法：

var map = new BMap.Map("container");  //創(chuàng)建地圖實例，注意在調用此構造函數時應確保容器元素已經添加到地圖上
var point = new BMap.Point(116.404, 39.915); //創(chuàng)建點坐標， 地圖必須經過初始化才可以執(zhí)行其他操作

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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