Faltblatt - Wie finde ich vorhandene Marker und lösche sie?

Ich habe begonnen, die Broschüre als Open-Source-Karte zu verwenden: http://leaflet.cloudmade.com/

Der folgende jQuery-Code ermöglicht die Erstellung von Markierungen auf der Karte beim Klicken auf die Karte:

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

Derzeit kann ich (in meinem Code) jedoch keine vorhandenen Markierungen löschen oder alle von mir erstellten Markierungen auf einer Karte finden und in ein Array einfügen. Kann mir jemand helfen zu verstehen, wie das geht? Die Dokumentation der Broschüre finden Sie hier: http://leaflet.cloudmade.com/reference.html

Sie müssen Ihren "var marker" aus der Funktion entfernen. Dann können Sie später darauf zugreifen:

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

dann später :

map.removeLayer(marker)

Auf diese Weise können Sie jedoch nur den neuesten Marker verwenden, da der Var-Marker jedes Mal durch den neuesten gelöscht wird. Eine Möglichkeit besteht darin, ein globales Array von Markern zu erstellen und Ihren Marker in das globale Array einzufügen.

Sie können Markierungen auch in ein Array verschieben. Siehe Codebeispiel, das funktioniert bei mir:

/*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]);
    }  
}

Hier finden Sie den Code und die Demo zum Hinzufügen des Markers , Löschen eines beliebigen Markers und Abrufen aller vorhandenen / hinzugefügten Marker :

Hier ist der gesamte JSFiddle-Code . Auch hier ist die ganzseitige Demo .

Hinzufügen des Markers:

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

Markierung löschen:

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

Alle Markierungen in der Karte abrufen:

// 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);

Hier ist eine jsFiddle , mit der Sie mithilfe Ihrer onMapClickMethode Markierungen erstellen und diese dann durch Klicken auf einen Link löschen können.

Der Vorgang ähnelt dem von undefined. Fügen Sie jeden neuen Marker zu einem markersArray hinzu, damit Sie auf einen bestimmten Marker zugreifen können, wenn Sie später mit ihm interagieren möchten.

(1) Hinzufügen einer Ebenengruppe und eines Arrays zum Halten von Ebenen und Verweisen auf Ebenen als globale Variablen:

var search_group = new L.LayerGroup (); var clickArr = new Array ();

(2) Karte hinzufügen

(3) Fügen Sie der Karte eine Gruppenebene hinzu

map.addLayer (search_group);

(4) die Funktion "Zur Karte hinzufügen" mit einem Popup, das einen Link enthält, der beim Klicken eine Option zum Entfernen enthält. Dieser Link hat als ID die Lat-Länge des Punktes. Diese ID wird dann verglichen, wenn Sie auf eine Ihrer erstellten Markierungen klicken und diese löschen möchten.

 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) Die Entfernungsfunktion, vergleichen Sie den Marker lat long mit der ID, die beim Entfernen ausgelöst wurde:

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

    }

    }  

Wenn Sie die Ehrfurcht vor dem Marker in der Additionsfunktion speichern, kann der Marker ihn selbst entfernen. Keine Notwendigkeit für 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]);
        }

Hast du es schon versucht layerGroup?

Dokumente hier https://leafletjs.com/reference-1.2.0.html#layergroup

Erstelle einfach eine Ebene, füge alle Marker zu dieser Ebene hinzu, dann kannst du Marker leicht finden und zerstören.

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

In meinem Fall habe ich verschiedene Ebenengruppen, damit Benutzer Cluster mit ähnlichen Typmarkierungen anzeigen / ausblenden können. In jedem Fall löschen Sie jedoch einen einzelnen Marker, indem Sie Ihre Ebenengruppen durchlaufen, um ihn zu finden und zu löschen. Suchen Sie während der Schleife nach einem Marker mit einem benutzerdefinierten Attribut, in meinem Fall einem 'Schlüssel', der hinzugefügt wurde, als der Marker zur Ebenengruppe hinzugefügt wurde. Fügen Sie Ihren 'Schlüssel' wie ein Titelattribut hinzu. Später wird dies eine Ebenenoption erhalten. Wenn Sie diese Übereinstimmung finden, entfernen Sie .removeLayer () und dieser bestimmte Marker wird entfernt. Hoffe das hilft dir weiter!

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

Vielleicht bin ich zu spät dafür, aber ich habe immer noch ein offenes Sorce-Projekt erstellt, um dasselbe zusammen mit einer anderen Sache zu tun

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

Bitte checke aus und starte, wenn du magst :)