Vue系列：如何将百度地图包装成Vue的组件

主要分解为如下步骤：

（1）在html文件中引入百度地图，

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

（2）在webpack.base.conf.js文件内添加external选项，在module.exports内部，和entry平级；

externals: {

"BMap": "BMap"

},

（3）添加地图组件BMapComponent.vue，这里主要注意两点：

a）使用BMap的时候不需要import了，import反而会报错

b）注意一定要给bmap的div设置高度，否则会看不见

该组件的代码如下

<template>
  <!-- <div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div> -->  
  <!-- <div id="allmap" :style="{width: ‘100%‘, height: mapHeight + ‘px‘}"></div> -->
 <div id="allmap" v-bind:style="mapStyle"></div>
</template>

<script>
export default {
  data: function() {
    return {
      mapStyle:  {
        width: ‘100%‘,
        height: this.mapHeight + ‘px‘ 
      }
    }
  },
  props:{
    // 地图在该视图上的高度
    mapHeight:{
      type: Number,
      default: 500
    },
    // 经度
    longitude: {
      type:Number,
      default: 116.404
    }, 
    // 纬度
    latitude: {
      type:Number,
      default:39.915
    },
    description:{
      type:String,
      default:‘天安门‘
    }
  },
  ready: function(){
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(this.longitude, this.latitude);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.centerAndZoom(point, 15);
    // 信息窗的配置信息
    var opts = {
      width : 250,
      height: 75,
      title : "地址：" ,
    }
    var infoWindow = new BMap.InfoWindow(this.description, opts);  // 创建信息窗口对象 
    marker.addEventListener("click", function(){          
      map.openInfoWindow(infoWindow,point);
    });
    map.enableScrollWheelZoom(true);    
    map.openInfoWindow(infoWindow,point); //开启信息窗口
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

（4） 在父组件中使用

a）引入 import BMapComponent from ‘./components/BMapComponent.vue‘

b）在template中增加标签

<b-map-component></b-map-component>

注意这里标签的命名，在vue文档中有说：http://vuejs.org.cn/guide/components.html#资源命名约定

来自为知笔记(Wiz)