javascript - 在传单 map 控制图层中切换标记的正确方法是什么？

Question

当将GeoJSON文件引入Leaflet map 时，我学会了addOverlay将数据添加到控制层切换，定义为全局变量，遵循@iH8的方法:

How to add two geoJSON feature collections in to two layer groups

但是，我无法使此方法适用于 JSON flickr 照片数据。在我当前的代码中，所有照片标记都出现在 map 上，但切换按钮仅控制一个标记。问题可能出在我的 script.js 的第 25-30 行:

$.getJSON(flickrURL, function (data){
for (var i = 0; i < data.photos.photo.length; i++){
  var photo_obj = data.photos.photo[i];
  marker = new L.marker([photo_obj.latitude, photo_obj.longitude])
  .bindPopup(popupHTML(photo_obj)).addTo(map);
}
controlLayers.addOverlay(marker, 'Flickr photos - broken button only toggles one image');
});

请参阅我的 Plunker 中的问题演示: http://plnkr.co/edit/LyzCNdzWrIIQYDz4dpfJ?p=preview

建议？

Answer 1

您必须将所有标记放入 L.LayerGroup 中，然后将该图层组添加到 LayerControl 中。现在，您将使用相同的标签将实际标记添加到您的 LayerControl 中，该标签用作索引，因此它会被每个标记覆盖，从而将一个标记添加到控件中，并且只有该标记会切换。代码中带有注释来解释:

$.getJSON(flickrURL, function (data) {
  // Create new layerGroup and add it to your map
  var layerGroup = new L.LayerGroup().addTo(map);
  // Add layerGroup to your layerControl
  controlLayers.addOverlay(layerGroup, 'Flickr photos - broken button only toggles one image');
  for (var i = 0; i < data.photos.photo.length; i++) {
    var photo_obj = data.photos.photo[i];
    var marker = new L.marker([photo_obj.latitude, photo_obj.longitude]);
    marker.bindPopup(popupHTML(photo_obj));
    // Add the marker to the layerGroup
    marker.addTo(layerGroup);
  }
});

更新的 Plunker:http://plnkr.co/edit/M1UG6CPGqbqfbk1BIiNH?p=preview

图层组引用:http://leafletjs.com/reference.html#layergroup