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

html

css

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("<p style='font-size:12px;line-height:1.8em;'" + markerArr[i].title+

"</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel+

"</br> 联系人：" + markerArr[i].contact+"</p>");//悬浮提示信息

}

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里的弹框监听事件循环