Vue Baidu Map使用

百度地圖官方提供的是常規<script>標籤引入的方法。要想將百度地圖引入Vue中，有兩種方式：

1. 在index.html中引入js檔案；修改webpack.base.conf.js來增加externals屬性；在主js中呼叫Vue.use來全域性註冊或在單個頁面中使用import單獨引入。這樣，在頁面中就可以像常規的頁面那樣使用百度地圖了。需要為容器<div>設定一個id屬性來初始化地圖。
2. 定義一個js檔案，export一個載入函式，在其中為document動態新增<script>標籤，並載入官方的地圖js庫。在頁面中將該函式import匯入，然後正常使用即可。同樣需要一個含id屬性的容器<div>。

上面這兩種方式，1比較直觀，2更貼近Vue的風格。百度官方提供了Vue Baidu Map，就是使用了方式2。
Vue Baidu Map定義了一個getMapScript()函式，在其中為document動態建立了一個<script>標籤，並將其src設為百度地圖JavaScript API v2.0。因此，Vue Baidu Map僅僅是百度官方推出的一個Vue封裝，核心功能是動態下載的，與常規頁面的百度地圖js庫是相同的。
然而，Vue Baidu Map是針對百度地圖JavaScript API v2.0進行的封裝，目前並不相容百度地圖JavaScript API v3.0。

安裝

呼叫命令：

npm install vue-baidu-map --save

安裝完成後，package.json中就會新增依賴：

"dependencies": {
    ...
    "vue-baidu-map": "^0.21.14",
    ...
},

node_modules資料夾下也會出現vue-baidu-map資料夾。

使用

在頁面中進行匯入：

import { BaiduMap, BmScale, BmMapType, BmNavigation } from 'vue-baidu-map/components'

在node_modules/vue-baidu-map/components/index.js中，匯出了官方封裝的所有地圖Vue元件。因此這裡可以直接引入多個所需要的元件。
然後在頁面的components中註冊：

components: { BaiduMap, BmScale, BmMapType, BmNavigation },

然後在頁面中使用元件即可：

<baidu-map class="map-container" v-bind="mapOptions" @ready="mapReady" @load="mapLoad" >
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"/>
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"/>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>

元件中傳入的屬性定義在data中。

data() {
   return {
     mapOptions: {
       ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
       center: '北京',
       scrollWheelZoom: true
     }
   }
},

上面為元件註冊了ready事件與load事件函式：

methods: {
  mapReady(e) {
    console.log("map ready");
    // let map = e.currentTarget;
  },
  mapLoad(e) {
    console.log("map load");
    // let BMap = e.BMap;
    // let map = e.map;
  }
}

其中：

• ready事件與load事件無必然關聯。
• ready事件是Vue封裝觸發。load事件是百度地圖JavaScript API v2.0提供。
• ready事件元件渲染完畢後觸發，通常只觸發一次。load事件在元件載入時觸發，多次載入會觸發多次。
• ready事件與load事件的觸發並無絕對先後順序。地圖主元件BaiduMap在center屬性為String時，zoom屬性為非必要，此時會先觸發ready，後觸發load；然而在center屬性為Point物件時，zoom屬性為必要，此時會先觸發load，後觸發ready。
• ready事件傳入的引數為：{BMap, map}。BMap為百度地圖建構函式，map為例項化後的地圖物件。load事件傳入的引數中包含多個屬性，其中有個currentTarget屬性，就是map例項。
• 所有地圖元件都有ready事件。但只有地圖主元件BaiduMap會觸發load事件，其他地圖元件不會觸發。
• 各個地圖元件的ready是按定義順序觸發，故地圖主元件BaiduMap的ready一定是最早觸發的。因此，在地圖主元件的ready中嘗試操作子元件有可能不會成功，因為此時子元件尚未ready。所以對元件的操作通常是在元件的ready事件中操作。
• 若要呼叫官方API為map動態新增元素，可以在BaiduMap元件的ready事件中執行。