VUE2.0 +百度地图javascript API绘制多个点实例

html

html

css

css

js

data:

markers: [//地址数据

  { title: "苏州有限公司",point: "121.490018|31.265754",address: "工业园区",tel:"10086",contact: "陈先生"},

  { title: "南京有限公司",point: "121.490939|31.257495",address: "相城区",tel:"12306",contact: "陈先生"},

  { title: "上海有限公司",point: "113.310854|23.113605",address: "外滩",tel:"0521846555",contact: "陈先生"}

]

addMarker(){

var markerArr= this.markers

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

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

  var info= new Array();//定义悬浮提示信息

  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]);

    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)});

    marker[i].setLabel(label);

    info[i]= new window.BMap.InfoWindow("

      "
地址：" + markerArr[i].address + "
电话：" + markerArr[i].tel+

      "
联系人：" + markerArr[i].contact+"

");//悬浮提示信息

  }

marker[0].addEventListener("click",function(){

this.openInfoWindow(info[0]);//悬浮监听提示方法

    });

    marker[1].addEventListener("click",function(){

this.openInfoWindow(info[1]);//悬浮监听提示方法

    });

    marker[2].addEventListener("click",function(){

this.openInfoWindow(info[2]);//悬浮监听提示方法

    });

},

********最后循环maker里的弹框监听事件循环