如何切换标记？

Question

我的代码，以使标记：

for (var marker in markers) { 
    var posMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng), 
     map: map, 
     visible: markers[marker].visible 
    });  
}; 

我的标记对象：

var markers = { 
     "London": {"lat": -83.68088192646843, "lng": -125.270751953125, "type": "town", "visible": false}, 
     "Paris": {"lat": -58.1548020417031, "lng": -21.318115234375, "type": "town", "visible": false}, 
}; 

我想能有一个复选框切换标记，像这样：

$('#toggle').change(function() { 
    for (var marker in markers) { 
     posMarker.setVisible(true); 
    }; 
}); 

但只显示阵列中的最后一个标记，我如何让它们全部出现？

谢谢。

Answer 1

嗯，我看到posMarker被用作放置Google地图标记的临时变量，随着for循环的进展，posMarker引用“更新”到放置的最新标记。这就是为什么只显示最后一个标记。

您需要跟踪所有对Google地图标记的引用，包括那些已被“消耗”的引用。我的方法使用了一个对象，就像您的对象markers一样，但保留对Google地图标记的引用。你也可以使用普通的索引数组（posMarkers []）。随你便。

请参阅Demo，注意LatLngs为简单起见进行了修改（看起来像您有一个自定义坐标系）。

另外，我没有做这种改变，但我只注意到它可能更有意义来调用markers ，city在markers，因为你的目标是编写方式。它会更具可读性，但不会影响执行。

最后，在for loops块末尾的分号是不需要的，并且要注意Paris对象后面的尾随逗号（我猜你刚刚删除了其余的列表）。在这种情况下，这并不重要，但其他时候，这些尾随逗号可能是难以发现的错误的来源。

function initialize() { 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    var markers = { 
     "London": {"lat": 0, "lng": 0, "type": "town", "visible": false}, 
     "Paris": {"lat": 10, "lng": 10, "type": "town", "visible": false} 
    }; 

    var posMarkers = {}; 

    for (var marker in markers) { 
     posMarkers[marker] = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng), 
     map: map, 
     visible: markers[marker].visible 
     });  
    } 

    $('#toggle').change(function() { 
     for (var marker in markers) { 
     if(posMarkers[marker].getVisible()) { 
      posMarkers[marker].setVisible(false); 
     } 
     else { 
      posMarkers[marker].setVisible(true); 
     } 
     } 
    }); 
    }