Vue系列：如何將百度地圖包裝成Vue的組件

（1）在index.html文件中引入百度地圖，

<script type="text/JavaScript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW "></script>

（2）在webpack.base.conf.js文件內添加external選項，在module.exports內部，和entry平級；
externals: {
   "BMap": "BMap" 

}, 

（3）添加地圖組件BMapComponent.vue，這裏主要注意兩點：
    a）使用BMap的時候需要import (經過本人測試，如果不用import會提示BMap未定義)

    
    b）注意一定要給bmap的div設置高度，否則會看不見
該組件的代碼如下

<!-- 頁面模版 -->
<template>
  <div>
    <!--header-->
    <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
    <!--header end-->

    <!--container-->
    <div id="allmap"
            style="
                width: 100%;
                height:200px;
                border: 1px solid gray;
                overflow:hidden;">
        </div>
    <!--container end-->
  </div>
</template>
<script>
import comHeader from 'components/comHeader'
import BMap from 'BMap'
export default {
  components: {
    comHeader
  },
  data: () => ({
    headerData: {
      title: '網點詳情',
      toLink: '/SalesOutlets'
    }
  }),
  created () {
    // 組件創建完後獲取數據，這裏和1.0不一樣，改成了這個樣子
    this.loadMap()
    // this.ready() // 如果在此處直接調用this.ready()方法，將無法加載地圖
  },
  mounted () {
    this.ready()
  },
  methods: {
    loadMap: function () {
      console.log(this.$route.params.name)
      console.log(this.$route.params.addr)
      console.log(this.$route.params.phone)
      // setTimeout(this.ready, 0)
    },
    ready: function () {
      var map = new BMap.Map('allmap')
      map.enableScrollWheelZoom(true)
      console.log(map)

      var localSearch = new BMap.LocalSearch(map)
      // localSearch.enableAutoViewport() // 允許自動調節窗體大小
      map.clearOverlays() // 清空原來的標註
      localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0)
        map.centerAndZoom(poi.point, 20)
        var point = new BMap.Point(poi.point.lng, poi.point.lat)
        var marker = new BMap.Marker(point) // 創建標註，爲要查詢的地方對應的經緯度
        map.addOverlay(marker)
      })
      localSearch.search(this.$route.params.addr)
    }
  }
}
</script>
<style>
  /* 去掉地圖左下角的百度LOGO */
  .anchorBL {
    display:none
  }
</style>

如果直接在實例生命週期的created中調用this.ready()方法將無法加載地圖，我在index.html中加入了一個id爲allmap的div，當我調用該組件時，該組件上的div沒有顯示地圖，而index.html中id爲allmap的div裏卻顯示了地圖，經過測試我猜測是因爲該組件還沒有初始化完畢，導致new BMap.Map('allmap')時實例化地圖對象失敗。所以應該在實例生命週期的mounted中調用this.ready()方法。

實例生命週期參見：https://vuefe.cn/v2/guide/instance.html#實例生命週期

（4） 在父組件中使用
    a）引入 import BMapComponent from './components/BMapComponent.vue'
    b）在template中增加標籤
     <b-map-component></b-map-component>