web-dev-qa-db-fra.com

Leaflet - 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 sur la carte. Cliquez sur:

 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 placer 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

jqueryleaflet
83
jay

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 utiliser que le dernier marqueur de cette façon, car à chaque fois, le marqueur var est effacé par le dernier. Il est donc possible de créer un tableau global de marqueurs et d’ajouter votre marqueur dans le tableau global.

129
Laurent Debricon

Vous pouvez également pousser des marqueurs dans un tableau. Voir 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]);
    }  
}
48
undefined

Voici le code et la démo pour Ajouter le marqueur, supprimer tout marqueur et aussi obtenir tous les marqueurs présents/ajoutés:

Voici l'intégralité du code JSFiddle . Aussi voici la démo de la page complète .

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 sur 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);
26
Kedar.Aitawdekar

Voici un jsFiddle qui vous permet de créer des marqueurs en utilisant votre méthode onMapClick, puis de les supprimer en cliquant sur un lien. 

Le processus est similaire à celui de undefined - ajoutez chaque nouveau marqueur à un tableau markers pour pouvoir accéder à un marqueur spécifique lorsque vous souhaitez interagir avec ce dernier ultérieurement. 

15
Brett DeWoody

(1) ajouter un groupe de couches et un tableau pour contenir des couches et faire référence à des couches en tant que variables globales: 

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

(2) ajouter une carte

(3) Ajouter un groupe de couches à la carte

map.addLayer (groupe_recherche);

(4) la fonction Ajouter à la carte, avec une fenêtre contextuelle contenant un lien, qui, une fois cliqué, aura une option de suppression. Ce lien aura, comme son identifiant, la dernière longueur du point. Cet identifiant sera ensuite comparé à lorsque 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 remove, comparez le marqueur lat long avec l'id tiré dans le remove:

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

    }

    }
7
droid-zilla

Lorsque vous enregistrez la révérence au marqueur dans la fonction d’ajout, le marqueur peut le supprimer 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]);
        }
1
F6F

Avez-vous déjà essayé layerGroup?

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

Il vous suffit de créer un calque, d’ajouter tous les marqueurs à ce calque pour pouvoir le rechercher et le détruire facilement.

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

Dans mon cas, j'ai plusieurs groupes de calques afin que les utilisateurs puissent afficher/masquer des clusters de marques similaires. Mais, dans tous les cas, vous supprimez un marqueur en faisant une boucle sur vos groupes de calques pour le rechercher et le supprimer. Pendant la boucle, recherchez un marqueur avec un attribut personnalisé, dans mon cas une "clé", ajoutée lors de l'ajout du marqueur au groupe de calques. Ajoutez votre clé comme si vous ajoutiez un attribut de titre. Plus tard, on obtient une option de calque. Lorsque vous trouvez cette correspondance, vous supprimez ce marqueur particulier. J'espère que ça 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);
                    }
                }
            }
        });
    });
}
0
Ron Royston