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已经过修改以简化（看起来你有一个自定义坐标系）。

此外，我没有做出此更改，但我发现在marker中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);
        }
      }
    }); 
  }

如何切换标记？

1 个答案: