在 Leaflet 地图控制层中切换标记的正确方法是什么？

Question

在将GeoJSON文件导入Leaflet地图时，我学会了addOverlay将数据切换到控制层，定义为全局变量，遵循@iH8 的方法：

但是，我无法使此方法适用于 JSON flickr 照片数据。在我当前的代码中，所有照片标记都出现在地图上，但切换只控制一个标记。问题可能出在我的 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

在 Leaflet 地图控制层中切换标记的正确方法是什么？

What is the Correct method to toggle markers in Leaflet map control layer?

javascript

jquery

json

flickr

leaflet