Volantino - Come trovare i marker esistenti ed eliminare i marker?

Ho iniziato a utilizzare il volantino come mappa open source, http://leaflet.cloudmade.com/

Il seguente codice jQuery consentirà la creazione di marker sulla mappa al clic sulla mappa:

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

Ma attualmente non c'è modo per me (nel mio codice) di eliminare i marker esistenti o di trovare tutti i marker che ho creato su una mappa e inserirli in un array. Qualcuno può aiutarmi a capire come farlo? La documentazione del volantino è disponibile qui: http://leaflet.cloudmade.com/reference.html

devi mettere il tuo "var marker" fuori dalla funzione. Successivamente potrai accedervi:

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

poi più tardi :

map.removeLayer(marker)

Ma in questo modo puoi avere solo il marker più recente, perché ogni volta il marker var viene cancellato dal più recente. Quindi un modo è creare un array globale di marker e aggiungere il marker nell'array globale.

Puoi anche inserire marker in un array. Vedi esempio di codice, questo funziona per me:

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

Ecco il codice e la demo per aggiungere il marker , eliminare qualsiasi marker e ottenere anche tutti i marker presenti / aggiunti :

Ecco l'intero codice JSFiddle . Anche qui c'è la demo a pagina intera .

Aggiunta del marker:

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

Eliminazione del marker:

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

Ottenere tutti gli indicatori nella mappa:

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

Ecco un jsFiddle che ti consente di creare marcatori utilizzando il tuo onMapClickmetodo, quindi eliminarli facendo clic su un collegamento.

Il processo è simile a quello di undefined: aggiungi ogni nuovo marker a un markersarray in modo da poter accedere a un marker specifico quando desideri interagire con esso in seguito.

(1) aggiungi un gruppo di livelli e un array per mantenere i livelli e fare riferimento ai livelli come variabili globali:

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

(2) aggiungi mappa

(3) Aggiungi layer di gruppo alla mappa

map.addLayer (search_group);

(4) la funzione aggiungi alla mappa, con un popup che contiene un collegamento, che quando cliccato avrà un'opzione di rimozione. Questo collegamento avrà, come ID, la parte più lunga del punto. Questo ID verrà quindi confrontato con quando fai clic su uno dei marker creati e desideri eliminarlo.

 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) La funzione di rimozione, confronta il marker lat long con l'id attivato nella rimozione:

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

    }

    }  

Quando salvi il rispetto per il marker nella funzione di aggiunta, il marker può rimuoverlo da solo. Non c'è bisogno di array.

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

Hai già provato layerGroup?

Documenti qui https://leafletjs.com/reference-1.2.0.html#layergroup

Crea semplicemente un livello, aggiungi tutti i marker a questo livello, quindi puoi trovare e distruggere facilmente il marker.

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

Nel mio caso, ho vari gruppi di livelli in modo che gli utenti possano mostrare / nascondere gruppi di marcatori di tipo simili. Tuttavia, in ogni caso, elimini un singolo marcatore scorrendo i tuoi gruppi di livelli per trovarlo ed eliminarlo. Durante il loop, cerca un marker con un attributo personalizzato, nel mio caso una "chiave", aggiunto quando il marker è stato aggiunto al gruppo di livelli. Aggiungi la tua "chiave" proprio come se aggiungi un attributo del titolo. Successivamente si ottiene un'opzione di livello. Quando trovi quella corrispondenza, devi .removeLayer () e si sbarazza di quel particolare marcatore. Spero che ciò ti aiuti!

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

Forse sono troppo tardi per questo, ma ho comunque creato un progetto open sorce per fare lo stesso insieme a qualche altra cosa

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

per favore controlla e fai la stella se ti piace :)