单张 – 如何find现有的标记，并删除标记？
我已经开始使用传单作为开源地图， http://leaflet.cloudmade.com/
以下jQuery代码将启用在地图上点击地图上的标记的创build：
map.on('click', onMapClick); function onMapClick(e) { var marker = new L.Marker(e.latlng, {draggable:true}); map.addLayer(marker); marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); }; 但目前我没有办法（在我的代码中）删除现有标记，或find我在地图上创build的所有标记，并将它们放入数组中。 任何人都可以帮我理解如何做到这一点？ 单张文档可在这里find： http ： //leaflet.cloudmade.com/reference.html
你必须把你的“var marker”放在函数之外。 然后，您可以访问它：
var marker; function onMapClick(e) { marker = new L.Marker(e.latlng, {draggable:true}); map.addLayer(marker); marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); };
那么稍后：
map.removeLayer(marker)
但是你只能使用最新的标记，因为每次var标记被最新的标记擦除。 所以，一种方法是创build一个全局标记数组，然后在全局数组中添加标记。
您也可以将标记推入数组中。 看代码示例，这对我有用：
/*create array:*/ var marker = new Array(); /*Some Coordinates (here simulating somehow json string)*/ var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}]; /*pushing items into array each by each and then add markers*/ function itemWrap() { for(i=0;i<items.length;i++){ var LamMarker = new L.marker([items[i].lat, items[i].lon]); marker.push(LamMarker); map.addLayer(marker[i]); } } /*Going through these marker-items again removing them*/ function markerDelAgain() { for(i=0;i<marker.length;i++) { map.removeLayer(marker[i]); } }
这里是代码和演示添加标记 ， 删除任何标记 ，也获得所有现在/添加标记 ：
这里是整个JSFiddle代码 。 另外这里是整页演示 。
添加标记：
// Script for adding marker on map click map.on('click', onMapClick); function onMapClick(e) { var geojsonFeature = { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [e.latlng.lat, e.latlng.lng] } } var marker; L.geoJson(geojsonFeature, { pointToLayer: function(feature, latlng){ marker = L.marker(e.latlng, { title: "Resource Location", alt: "Resource Location", riseOnHover: true, draggable: true, }).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>"); marker.on("popupopen", onPopupOpen); return marker; } }).addTo(map); }
删除标记：
// Function to handle delete as well as other events on marker popup open function onPopupOpen() { var tempMarker = this; // To remove marker on click of delete button in the popup of marker $(".marker-delete-button:visible").click(function () { map.removeLayer(tempMarker); }); }
获取地图中的所有标记：
// getting all the markers at once function getAllMarkers() { var allMarkersObjArray = []; // for marker objects var allMarkersGeoJsonArray = []; // for readable geoJson markers $.each(map._layers, function (ml) { if (map._layers[ml].feature) { allMarkersObjArray.push(this) allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON())) } }) console.log(allMarkersObjArray); } // any html element such as button, div to call the function() $(".get-markers").on("click", getAllMarkers);
这是一个jsFiddle ，可以让你使用onMapClick方法创build标记，然后通过点击链接来删除它们。
该过程类似于未定义的 – 将每个新标记添加到markers数组，以便您稍后可以访问特定标记。
（1）添加图层组和图层来保存图层和引用图层作为全局variables：
var search_group = new L.LayerGroup（）; var clickArr = new Array（）;
（2）添加地图
（3）添加组图层到地图
map.addLayer（search_group）;
（4）添加到地图function，popup包含链接，点击时将有一个删除选项。 这个链接将具有，作为其点的经济长期。 这个ID将会被比较，当你点击你创build的标记之一，你想删除它。
map.on('click', function(e) { var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon: idMarker}); clickArr.push(clickPositionMarker); mapLat = e.latlng.lat; mapLon = e.latlng.lng; clickPositionMarker.addTo(search_group).bindPopup("<a name='removeClickM' id="+e.latlng.lat+"_"+e.latlng.lng+">Remove Me</a>") .openPopup(); /* clickPositionMarker.on('click', function(e) { markerDelAgain(); }); */ });
（5）remove函数，比较标记lat long和在remove中被激发的id：
$(document).on("click","a[name='removeClickM']", function (e) { // Stop form from submitting normally e.preventDefault(); for(i=0;i<clickArr.length;i++) { if(search_group.hasLayer(clickArr[i])) { if(clickArr[i]._latlng.lat+"_"+clickArr[i]._latlng.lng==$(this).attr('id')) { hideLayer(search_group,clickArr[i]); clickArr.splice(clickArr.indexOf(clickArr[i]), 1); } } }
当您在添加function中保存对标记的尊敬时，标记可以自行删除它。 不需要arrays。
function addPump(){ var pump = L.marker(cords,{icon: truckPump}).addTo(map).bindPopup($('<a href="#" class="speciallink">Remove ME</a>').click(function() { map.removeLayer(pump); })[0]); }
在我的情况下，我有不同的图层组，以便用户可以显示/隐藏types标记的集群。 但是，在任何情况下，您都可以通过循环查找和删除图层组来删除单个标记。 在循环时，search带有自定义属性的标记，在我的情况下，将标记添加到图层组时添加“key”。 像添加标题属性一样添加您的“关键”。 之后这是获得一个图层选项。 当你find匹配的时候，你.removeLayer（）就会去掉那个特定的标记。 希望能帮助你！
eventsLayerGroup.addLayer(L.marker([tag.latitude, tag.longitude],{title:tag.title, layer:tag.layer, timestamp:tag.timestamp, key:tag.key, bounceOnAdd: true, icon: L.AwesomeMarkers.icon({icon: 'vignette', markerColor: 'blue', prefix: '', iconColor: 'white'}) }).bindPopup(customPopup(tag),customOptions).on('click', markerClick)); function removeMarker(id){ var layerGroupsArray = [eventsLayerGroup,landmarksLayerGroup,travelerLayerGroup,marketplaceLayerGroup,myLayerGroup]; $.each(layerGroupsArray, function (key, value) { value.eachLayer(function (layer) { if(typeof value !== "undefined"){ if (layer.options.layer){ console.log(layer.options.key); console.log(id); if (id === layer.options.key){ value.removeLayer(layer); } } } }); }); }
