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" @load="mapLoad" @ready="mapReady">
    <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事件传入的参数e，为：{BMap, map}。BMap为百度地图构造函数，map为实例化后的地图对象。
对于地图主体，在ready中已经加载完毕。但地图使用的各种其他组件，例如BmScale，由于是异步加载，此时可能并没有加载完成。而在load中，所有组件都加载完成了。因此：

• 若要调用官方API为map动态添加元素，可以在ready中执行。
• 若使用了各种组件，那么需要在load中操作。
  load传入的参数e是一个对象，该对象有个currentTarget属性，就是map实例。