Vue框架中添加百度地图组件,及信息窗的配置信息

1.申请百度地图密钥
2.在index.html中添加百度地图JavaScript API接口
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密钥=&t=20170517145936"></script>
3.在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；
  externals: {
    'BMap': 'BMap'
  },  
//以下是实例,不懂得小伙伴可以给我留言哦~
<template>
  <div id="Map">
        <div id="allmap" class="allmap"></div>
  </div>
</template>

<script>
export default {
  name: 'Map',
  components:{
  },
  data () {
    return {
      type: 'tab',
      address_detail: '北京市海淀区',
      center: {lng: 111, lat:34},
    }
  },
  mounted () {
    this.ready()
  },
  methods: {
    ready () {

    //MAP
    var map = new BMap.Map('allmap')
    var point = new BMap.Point(this.center.lng, this.center.lat) //经纬度
    map.centerAndZoom(point, 20) //缩放尺寸
    map.enableScrollWheelZoom(true) //滚轮放大缩小
    map.enableDoubleClickZoom(true) //点击放大
    var marker = new BMap.Marker(point)  // 创建标注
    // 信息窗的配置信息
        var opts ={
          width :250,
          height:75,
          title :"<span style='font-size:20px;color:#FF0000;background-color:#FFFFFF'>公司地址:</span>"
        }
        var infoWindow =new BMap.InfoWindow(this.address_detail, opts);// 创建信息窗口对象
        marker.addEventListener("click",function(){
          map.openInfoWindow(infoWindow,point);
        });
        map.enableScrollWheelZoom(true); //滚轮放大缩小
        map.openInfoWindow(infoWindow,point);//开启信息窗口
    map.addOverlay(marker)              // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);  //给icon添加动画
    }
  }
}
</script>
<style scoped>
 #allmap{
    width: 100%;
    height: 500px;
    font-size: 18px;
    line-height: 36px;
  }
</style>