Dépliant - Comment trouver des marqueurs existants et supprimer des marqueurs?

J'ai commencé à utiliser leaflet comme une carte open source, http://leaflet.cloudmade.com/

Le code jQuery suivant permettra la création de marqueurs sur la carte en cliquant sur la carte:

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

Mais il n'y a actuellement aucun moyen pour moi (dans mon code) de supprimer les marqueurs existants, ou de trouver tous les marqueurs que j'ai créés sur une carte et de les mettre dans un tableau. Quelqu'un peut-il m'aider à comprendre comment faire cela? La documentation de la brochure est disponible ici: http://leaflet.cloudmade.com/reference.html

vous devez mettre votre "marqueur var" hors de la fonction. Ensuite, vous pourrez y accéder plus tard:

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

puis plus tard:

map.removeLayer(marker)

Mais vous ne pouvez avoir que le dernier marqueur de cette façon, car à chaque fois, le marqueur var est effacé par le dernier. Donc, une façon de procéder consiste à créer un tableau global de marqueurs et à ajouter votre marqueur dans le tableau global.

Vous pouvez également pousser des marqueurs dans un tableau. Voir l'exemple de code, cela fonctionne pour moi:

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

Voici le code et la démo pour ajouter le marqueur , supprimer l'un des marqueurs et obtenir tous les marqueurs présents / ajoutés :

Voici le code JSFiddle complet . Voici également la démo pleine page .

Ajout du marqueur:

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

Suppression du marqueur:

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

Obtenir tous les marqueurs de la carte:

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

Voici un jsFiddle qui vous permet de créer des marqueurs à l'aide de votre onMapClickméthode, puis de les supprimer en cliquant sur un lien.

Le processus est similaire à celui d'undefined - ajoutez chaque nouveau marqueur à un markerstableau afin que vous puissiez accéder à un marqueur spécifique lorsque vous souhaitez interagir avec lui plus tard.

(1) ajoutez un groupe de calques et un tableau pour contenir les calques et faire référence aux calques en tant que variables globales:

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

(2) ajouter une carte

(3) Ajouter une couche de groupe à la carte

map.addLayer (search_group);

(4) la fonction d'ajout à la carte, avec une fenêtre contextuelle contenant un lien qui, une fois cliqué, aura une option de suppression. Ce lien aura, comme identifiant, le lat long du point. Cet identifiant sera ensuite comparé au moment où vous cliquez sur l'un de vos marqueurs créés et que vous souhaitez le supprimer.

 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 fonction de suppression, comparez le marqueur lat long à l'id tiré dans le supprimer:

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

    }

    }  

Lorsque vous enregistrez la vénération du marqueur dans la fonction d'ajout, le marqueur peut le supprimer lui-même. Pas besoin de tableaux.

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

Avez-vous déjà essayé layerGroup?

Docs ici https://leafletjs.com/reference-1.2.0.html#layergroup

Créez simplement un calque, ajoutez tous les marqueurs à ce calque, puis vous pouvez trouver et détruire facilement le marqueur.

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

Dans mon cas, j'ai différents groupes de calques afin que les utilisateurs puissent afficher / masquer des clusters de marqueurs de type similaires. Mais, dans tous les cas, vous supprimez un marqueur individuel en faisant une boucle sur vos groupes de calques pour le trouver et le supprimer. Pendant la boucle, recherchez un marqueur avec un attribut personnalisé, dans mon cas une «clé», ajouté lorsque le marqueur a été ajouté au groupe de calques. Ajoutez votre «clé» tout comme l'ajout d'un attribut de titre. Plus tard, cela devient une option de couche. Lorsque vous trouvez cette correspondance, vous .removeLayer () et il se débarrasse de ce marqueur particulier. J'espère que cela vous aide!

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

Peut-être suis-je trop tard pour cela, mais j'ai quand même créé un projet open sorce pour faire de même avec autre chose

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

s'il vous plaît vérifier et faire la star si vous aimez :)