1.当点击第一个marker的时候,信息框出现在最后一个marker上。
for (var i = 0; i < 5; i++) {
var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例
icon: icon
});
mkr.addEventListener("click", function(){
//这里用的是mkr
mkr.openInfoWindow(new BMap.InfoWindow("一" + i, {
width: 200,
height: 0,
title: "一" + i,
enableMessage: false
}));
}); //在图标实例上添加鼠标点击事件
map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
}
出现这个问题的原因是:
这5个marker身上注册的click事件其实都是最后一个的click事件。(原因看闭包)
所以,不管点击第几个marker,信息框都是在最后个marker上出现。
解决这个问题的方法是:
this.addEventListener("click", function(e){//将mkr改成this,表示每个click事件都是为当前图标注册的,避免了闭包原因让每个图标注册的都是最后个marker的click事件
searchInfoWindow.open(marker);
});
2.但是此方法仅仅解决了为何点击第一个marker时,信息框出现在最后个marker的情况。而每个信息框里的内容相同的情况并没有解决。
解决这个问题需要用到闭包机制:
for (var i = 0; i < 5; i++) {
var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例
icon: icon
});
(function(x){
mkr.addEventListener("click", function(){
//这里用的是mkr
this.openInfoWindow(new BMap.InfoWindow("一" + x, {
width: 200,
height: 0,
title: "一" + x,
enableMessage: false
}));
}); //在图标实例上添加鼠标点击事件
})(i);
map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
}