存在多个marker时，点击第一个marker时，信息框出现在最后

来源：互联网发布：开启数据漫游有什么用编辑：程序博客网时间：2024/06/02 04:30

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(){//这里用的是mkrmkr.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(){//这里用的是mkrthis.openInfoWindow(new BMap.InfoWindow("一" + x, {width: 200,height: 0,title: "一" + x,enableMessage: false}));}); //在图标实例上添加鼠标点击事件  })(i);map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次   }