2013-12-23 181 views
16

我不知道是否有人知道如何,或者如果你確實可以使用此約定將其刪除後點的層:刪除單張層和L.marker方法

var pointsLayer, someFeatures = [{ 
      //Hard coded for now 
      "type": "Feature", 
      "properties": { 
       "name": "Company A", 
       "show_on_map": true, 
       "icon": 'img/violations.png' 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [43.22519, -107.69348] 
      } 
     }, { 
      "type": "Feature", 
      . 
      . 
      . 
    }]; 
for(w=0; w < someFeatures.length; w++){ 
       pointsLayer = L.marker(someFeatures[w].geometry.coordinates, {icon: violations}) 
        .bindPopup("Company: "+someFeatures[w].properties.name); 
        //add map points 
        map.addLayer(pointsLayer); 
      } 

典型removeLayer(pointsLayer);在類似的循環內不適合我。但是,這並不意味着沒有辦法循環。我只是不確定如何。我正在嘗試添加正在工作的點,然後在事件(不工作)上刪除它們。有任何想法嗎?

謝謝大家。

P.S.如果你認爲這個問題是相關的或有幫助的,請不要忘記放棄舊的讚許,歡呼聲。

回答

39

除了直接在地圖上添加所有標記,您可以在單獨的圖層上添加標記(即var markers = new L.FeatureGroup();),然後在地圖上(map.addLayer(markers);)將該圖層添加到循環外部。

例如,

http://jsfiddle.net/9BXL7/

HTML

<button>remove all markers</button> 
<div id="map"></div> 

CSS

html, body, #map { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

JS

var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', 
    key: 'BC9A493B41014CAABB98F0471D759707' 
}); 

var map = L.map('map') 
    .setView([50.5, 30.51], 15) 
    .addLayer(cloudmade); 

var markers = new L.FeatureGroup(); 

function getRandomLatLng(map) { 
    var bounds = map.getBounds(), 
     southWest = bounds.getSouthWest(), 
     northEast = bounds.getNorthEast(), 
     lngSpan = northEast.lng - southWest.lng, 
     latSpan = northEast.lat - southWest.lat; 

    return new L.LatLng(
    southWest.lat + latSpan * Math.random(), 
    southWest.lng + lngSpan * Math.random()); 
} 

function populate() { 
    for (var i = 0; i < 10; i++) { 
     var marker = L.marker(getRandomLatLng(map)); 
     marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>", { 
      showOnMouseOver: true 
     }); 
     markers.addLayer(marker); 
    } 
    return false; 
} 

map.addLayer(markers); 

populate(); 
function removeAllMarkers(){ 
    map.removeLayer(markers); 
} 
document.querySelector('button').onclick=function(){removeAllMarkers()}; 

如果您需要刪除或清除標記層在以後的使用,以換出點:

markers.clearLayers(); 
+0

這看起來像我在找什麼。非常感謝。 –

11

使用map.removeLayer()

var circle = L.circle([lat, lng], 1000).addTo(map); 
map.removeLayer(circle); 
+0

代碼只有答案通常可以從代碼中得到一些解釋。通過解釋他們與現有答案的區別,延遲答案得到改進。 –

+2

我不會因爲「使用map.removeLayer: 」這個詞而將它分類爲「code only」對於那些正在掃描而不是真正詳細閱讀內容的人來說......因此向我故意嘗試離開的東西添加更多信息會很奇怪。 – f1lt3r

0

你可以在所有直接在對象'地圖'中繪製圖層。

for (key in map['_layers']){ 
    if(typeof map['_layers'][key]['feature'] !== 'undefined') { 
     var l = map['_layers'][key]; 
     if(l['feature']['properties']['name'] === 'Company A') l.removeFrom(map);}}