传单-如何查找现有标记，并删除标记？

我已经开始使用传单作为开源地图， http：//leaflet.cloudmade.com/

以下jQuery代码可在点击地图时在地图上创建标记：

 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();
};

但是目前（在我的代码中）我无法删除现有标记，也无法找到我在地图上创建的所有标记并将它们放入数组中。谁能帮助我了解如何执行此操作？传单文档可在此处获得：http : //leaflet.cloudmade.com/reference.html

您必须将“ var标记”放到函数之外。然后，您可以访问它：

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标记都会被最新的标记擦除。因此，一种方法是创建一个全局标记数组，然后将标记添加到全局数组中。

您也可以将标记推入数组。查看代码示例，这对我有用：

/*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方法创建标记，然后通过单击链接将其删除。

该过程类似于undefined的过程-将每个新标记添加到markers数组中，以便以后要与之交互时可以访问特定标记。

（1）添加图层组和数组以保存图层并引用图层作为全局变量：

var search_group = new L.LayerGroup（）; var clickArr = new Array（）;

（2）添加地图

（3）在地图上添加组图层

map.addLayer（search_group）;

（4）添加到地图功能，带有一个包含链接的弹出窗口，单击该链接时将具有删除选项。该链接将是该点的最后一个，作为其ID。然后，将该ID与您单击创建的标记之一并要删除它时进行比较。

 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）移除功能，将标记lat long与移除中触发的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 addPump(){
   var pump = L.marker(cords,{icon: truckPump}).addTo(map).bindPopup($('<a href="#" class="speciallink">Remove ME</a>').click(function() {
            map.removeLayer(pump);
          })[0]);
        }

你有没有尝试过layerGroup？

此处的文档https://leafletjs.com/reference-1.2.0.html#layergroup

只需创建一个图层，将所有标记添加到该图层，即可轻松找到并销毁标记。

var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)

就我而言，我有各种图层组，以便用户可以显示/隐藏类似类型标记的群集。但是，无论如何，您都可以通过遍历图层组来查找和删除标记来删除单个标记。循环时，搜索具有自定义属性的标记（在我的情况下为“键”），该标记是在将标记添加到图层组时添加的。就像添加标题属性一样，添加“键”。稍后，将获得一个图层选项。找到该匹配项后，您便会删除.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);
                    }
                }
            }
        });
    });
}

也许我为时已晚，但是我仍然创建了一个开放式的源项目来与其他事情一起做

https://github.com/ikishanoza/ionic-leaflet

如果您喜欢，请结帐并加注星标:)