实现效果如图所示:
主要思路就是将点位循环遍历出来,并展示各自的地址信息
难点 每次遍历出来的信息窗口都是数组最后一条数据,通过mark点击事件发现点击图上任何一个mark点显示出来的都是数组最后一个索引,这才导致信息窗口没有对应
解决办法:使用闭包方法,使每次循环的索引私有化,在此直接上代码!
geocInfoWindow = function (arrData) {
var infoWindow
var info
var map = new BMap.Map('divMap');
var point = new BMap.Point(arrData[1].point.lng,arrData[1].point.lat)//arrData为数据点位
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
for(var j = 0; j < arrData.length; j++) {//遍历出所有点位
(function (j) {//闭包方法
var point1 = new BMap.Point(arrData[j].point.lng,arrData[j].point.lat); // 创建点坐标
var marker = new BMap.Marker(point1);
map.addOverlay(marker);
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "坐标信息" // 信息窗口标题
}
info = '<span>地址:</span><span>' + arrData[j].address +'</span></br><span>提车时间:' + arrData[j].time +'</span>'
infoWindow = new BMap.InfoWindow(info, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point1);
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point1); //开启信息窗口
});
})(j)
}
实现效果如图所示!!