OpenLayer 中标记事件的奇怪行为

Question

我的地图上有标记图层。

每次添加新标记时，我都会将其注册到鼠标单击事件：

var lonlat = new OpenLayers.LonLat(lon,lat);
var marker = new OpenLayers.Marker(lonlat,icon);
marker.id = callId;

marker.events.register("mousedown", marker, function() {AddPopup(marker.id);});

callMarkers.addMarker(marker);

有时我想禁用/启用该事件。所以我使用这些函数：

function EnableAllMarkers()
{ 
    for (var i in callMarkers.markers)
    {
        callMarkers.markers[i].events.remove("mousedown");               

        callMarkers.markers[i].events.register("mousedown", callMarkers.markers[i],   

        function() { AddPopup(callMarkers.markers[i].id); });
    }  
}


function DisableAllMarkers()
{ 
    for (var i in callMarkers.markers)
    {
        callMarkers.markers[i].events.remove("mousedown");
    }  
}

当我使用此代码时，我会得到奇怪的行为 - 有时会打开一个弹出窗口，显示错误的标记。

我单击标记 X，然后弹出窗口 Y 打开。

有人可以帮我吗？

注：
EnableAllmMarkers 首先删除该事件的原因是我们不知道添加新标记后是否曾经调用过 DisableAllmMarkers。如果确实被调用，remove 函数将不会执行任何操作。

Answer 1

这是一个经典的 JavaScript 陷阱：您在循环中将函数实例化为事件处理程序，并且这些函数引用局部变量。问题是它们全部都引用相同局部变量：相同、单一、唯一、内存中只有一个位置的变量。本例中的变量是“i”。

在 for 循环结束时，“i”将具有对象中最后一个键的值（顺便说一下，如果 callMarkers.markers 确实是一个数组，那么这不应该是一个 for ... in 循环，但这是一个单独的问题）。因此，当这些事件最终触发时，所有处理程序都将使用等于同一个键的“i”来执行操作。

修复：

  for (var i in callMarkers.markers)
    {
        callMarkers.markers[i].events.remove("mousedown");               

        callMarkers.markers[i].events.register(
          "mousedown", 
          callMarkers.markers[i],
          (function(ii) {
            return function() {
              AddPopup(callMarkers.markers[ii].id);
            }
          )(i)
         );
    } 

这引入了一个中间匿名函数。该函数立即被调用，并传递“i”的当前值。通过这样做——将“i”作为参数传递给匿名函数——该值被“捕获”在参数“ii”中。每次循环迭代都会导致匿名函数的另一次调用，并且它返回的函数（实际处理程序）将有权访问其自己的私有“ii”变量。

还有一些其他方法可以实现相同的目标，但它们都只是这个主题的变体。

Answer 2

我遇到了同样的问题，一旦事件注册到特定的制造商，它也会触发所有其他标记。最后，我能够解决它。我必须为每个标记注册单独的事件。以下是我的代码：

    var makerCount=0; // I want only 2 Markers to be shown : Source,Destination

function setMarkers(x,y){
    var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);  

 if(makerCount<2){

    if(makerCount==0){  // Source
       var location = new OpenLayers.LonLat(x,y); 

       var size = new OpenLayers.Size(21,25);
       var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);

        var sourceMarker=new OpenLayers.Marker(location,icon)
        sourceMarker.events.register('mousedown', sourceMarker, function(evt) { 
                alert('Source :: X='+ x + ' , Y=' + y); 
                OpenLayers.Event.stop(evt); }); 


        markers.addMarker(sourceMarker); 
        markers.setOpacity(0.2);
        makerCount++;
    }else{ // Destination

        var location = new OpenLayers.LonLat(x,y); 

        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var halfIcon = icon.clone();  

        var destinationMarker=new OpenLayers.Marker(location,halfIcon)
        destinationMarker.events.register('mousedown', destinationMarker, function(evt) { 
                alert('Destination :: X='+ x + ' , Y=' + y); 
                OpenLayers.Event.stop(evt); 
           });          
        markers.addMarker(destinationMarker); 
        halfIcon.setOpacity(0.5);
        makerCount++;
    }

 }
}