vue项目使用百度地图插件，标记店铺分店坐标

<template>
  <div id="Map">
        <div id="allmap" class="allmap" ref="myMap"></div>
  </div>
</template>

<script>
export default {
  name: 'Map',
  components:{
  },
  data () {
    return {
      type: 'tab',
      center: {lng: 116.405813, lat:39.914059},//以天安门作为中心点
    }
  },
mounted(){
       this.initMap()
   },
methods:{
     initMap () {
       this.createMap() ; //创建地图
       this.setMapEvent();//设置地图事件
       this.addMapControl();//向地图添加控件
       this.addMarker();//向地图中添加marker
     },
     createMap(){
       var map = new BMap.Map(this.$refs.myMap);//在百度地图容器中创建一个地图
      //  var point = new BMap.Point(116.405813,39.914059);//定义一个中心点坐标
      var point = new BMap.Point(this.center.lng,this.center.lat);//定义一个中心点坐标
       map.centerAndZoom(point,11);//设定地图的中心点和坐标并将地图显示在地图容器中
       window.map = map;//将map变量存储在全局
     },
     setMapEvent(){
       map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
       map.enableScrollWheelZoom();//启用地图滚轮放大缩小
       map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
       map.enableKeyboard();//启用键盘上下左右键移动地图
     },
     addMapControl(){
       //向地图中添加缩放控件
       var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
       map.addControl(ctrl_nav);
       //向地图中添加缩略图控件
       var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
       map.addControl(ctrl_ove);
       //向地图中添加比例尺控件
       var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
       map.addControl(ctrl_sca);
     },
     addMarker(){
       var markerArr = [//地址数据
         { title: "1",       point: "112.311565|39.872426",address: "北京市丰台区丰台 ",contact: "陈先生"},
         { title: "2",  point: "101.404782|39.867238",address: "北京市百",contact: "陈先生"},
         { title: "3",point: "110.362076|39.866107",address: "北京市",contact: "陈先生"},
         { title: "4店",point: "17.607422|39.930874",address: "北京市",contact: "陈先生"},
         { title: "5店",point: "15.539295|39.807957",address: "北京市",contact: "陈先生"},
         { title: "6店",point: "12.246079|40.217775",address: "北京市昌广场F4",contact: "陈先生"},
         { title: "7店",point: "116.706746|39.924416",address: "北京市通州区",contact: "陈先生"},
       ]

       var point = new Array();//定义数组标注经纬信息

       var marker = new Array();//定义数组点对象信息

       var info = new Array();//定义悬浮提示信息
        //设置icon信息
        var width = 32;
        var height = 32;
        var imgSrc = "../../static/images/cat.png"; //引入icon图片
        var myIcon_vd1 = new BMap.Icon(imgSrc, new BMap.Size(width,height));//配置icon
        for(var i = 0; i < markerArr.length; i++){//遍历
         var infoA = markerArr[i].point.split("|")[0];//分割|
         var infoB = markerArr[i].point.split("|")[1];

         point[i] = new window.BMap.Point(infoA,infoB);

         marker[i] = new window.BMap.Marker(point[i],{icon:myIcon_vd1});//把icon和坐标添加到Marker中

         map.addOverlay(marker[i]);
         marker[i].setAnimation(BMAP_ANIMATION_BOUNCE);

         var label = new window.BMap.Label(markerArr[i].title,{offset: new window.BMap.Size(20,-10)});
         label.setStyle({  //设置提示框的样式
            color : "#000", 
            fontSize : "14px", 
            backgroundColor :"#fff",
            border :"1px solid red", 
            fontWeight :"bold" ,
            padding :"2px 6px"
        });
         marker[i].setLabel(label);

         info[i] = new window.BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 联系人：" + markerArr[i].contact+"</p>");//悬浮提示信息
       }
       marker[0].addEventListener("mouseover",function(){
         this.openInfoWindow(info[0]);//悬浮监听提示方法
       });
       marker[1].addEventListener("mouseover",function(){
         this.openInfoWindow(info[1]);//悬浮监听提示方法
       });
       marker[2].addEventListener("mouseover",function(){
         this.openInfoWindow(info[2]);//悬浮监听提示方法
       });
       marker[3].addEventListener("mouseover",function(){
         this.openInfoWindow(info[3]);//悬浮监听提示方法
       });
       marker[4].addEventListener("mouseover",function(){
         this.openInfoWindow(info[4]);//悬浮监听提示方法
       });
       marker[5].addEventListener("mouseover",function(){
         this.openInfoWindow(info[5]);//悬浮监听提示方法
       });
       marker[6].addEventListener("mouseover",function(){
         this.openInfoWindow(info[6]);//悬浮监听提示方法
       });
     },
}
}
</script>

<style scoped>
 #allmap{
    width: 100%;
    height: 500px;
    font-size: 18px;
    line-height: 36px;
  }
</style>