什麼是在Leaflet地圖控制圖層中切換標記的正確方法？

Question

當使以GeoJSON文件到單張地圖，我學會addOverlay的數據提供給控制層觸發，被定義爲一個全局變量，以下這種方法通過@ IH8：

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

但我無法使此方法與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