Folleto: ¿Cómo encontrar marcadores existentes y eliminar marcadores?

102

Empecé a usar el folleto como un mapa de código abierto, http://leaflet.cloudmade.com/

El siguiente código de jQuery permitirá la creación de marcadores en el mapa al hacer clic en el mapa:

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

Pero actualmente no hay forma de que yo (en mi código) elimine los marcadores existentes, o encuentre todos los marcadores que he creado en un mapa y los ponga en una matriz. ¿Alguien puede ayudarme a entender cómo hacer esto? La documentación del folleto está disponible aquí: http://leaflet.cloudmade.com/reference.html

arrendajo
fuente
3
La mejor forma es crear un grupo de capas. Luego podemos agregar marcadores al grupo de capas. Layergroup permite controlar todos los marcadores a la vez.
neogeomat
1
Layer Groups es definitivamente la forma más limpia de manejar esto. Documentos aquí: leafletjs.com/reference.html#layergroup
Zar Shardan

Respuestas:

152

tienes que poner tu "marcador var" fuera de la función. Luego, más tarde, puede acceder a él:

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

Entonces despúes :

map.removeLayer(marker)

Pero solo puede tener el último marcador de esa manera, porque cada vez, el marcador var es borrado por el último. Entonces, una forma de hacerlo es crear una matriz global de marcadores y agregar su marcador en la matriz global.

Laurent Debricon
fuente
20
Debería ser una forma de recopilar todas las capas utilizadas por Leaflet. : /
jackyalcine
10
Las capas se almacenan internamente en map._layers.
flup
11
@jackyalcine: Mira LayerGroup y FeatureGroup
Michael Wales
54

También puede insertar marcadores en una matriz. Ver ejemplo de código, esto funciona para mí:

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

Aquí está el código y la demostración para agregar el marcador , eliminar cualquiera de los marcadores y también obtener todos los marcadores presentes / agregados :

Aquí está el código JSFiddle completo . También aquí está la demostración de página completa .

Añadiendo el marcador:

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

Eliminar el marcador:

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

Obteniendo todos los marcadores en el mapa:

// 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);
Kedar.Aitawdekar
fuente
1
Para obtener todos los marcadores, map._layers[ml].featureya no funciona.
Samuel Méndez
15

Aquí hay un jsFiddle que le permite crear marcadores usando su onMapClickmétodo, luego eliminarlos haciendo clic en un enlace.

El proceso es similar al de los indefinidos: agregue cada marcador nuevo a una markersmatriz para que pueda acceder a un marcador específico cuando desee interactuar con él más adelante.

Brett DeWoody
fuente
1
¡Agradable! Solo una pregunta, La matriz de marcadores () aún conserva los eliminados, ¿Cómo eliminaría los marcadores también de la matriz? ¡Gracias!
Miguel Stevens
Podrías usar deletepara eliminar el artículo. Por ejemplo delete markers[$(this).attr('id')];.
Brett DeWoody
La API creada en la nube que se incluye para los mosaicos en este ejemplo parece estar inactiva ahora. Aquí hay una bifurcación que es exactamente la misma, pero usa el servidor de mosaicos mapquest en lugar de hecho en la nube, por lo que no se necesita una clave API. jsfiddle.net/nqDKU
FoamyGuy
7

(1) agregue un grupo de capas y una matriz para mantener las capas y hacer referencia a las capas como variables globales:

var grupo_búsqueda = new L.LayerGroup (); var clickArr = new Array ();

(2) agregar mapa

(3) Agregar capa de grupo al mapa

map.addLayer (grupo_búsqueda);

(4) la función agregar al mapa, con una ventana emergente que contiene un enlace, que cuando se hace clic tendrá una opción de eliminación. Este enlace tendrá, como id, la latitud del punto. Esta identificación luego se comparará con cuando hace clic en uno de sus marcadores creados y desea 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 función de eliminación, compara la latitud del marcador con la identificación disparada en la eliminación:

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

    }

    }  
droide-zilla
fuente
1

Cuando guarda la reverencia en el marcador en la función de adición, el marcador puede eliminarse por sí mismo. Sin necesidad de matrices.

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

¿Ya lo has probado layerGroup?

Documentos aquí https://leafletjs.com/reference-1.2.0.html#layergroup

Simplemente cree una capa, agregue todos los marcadores a esta capa, luego podrá encontrar y destruir el marcador fácilmente.

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

En mi caso, tengo varios grupos de capas para que los usuarios puedan mostrar / ocultar grupos de marcadores de tipo similar. Pero, en cualquier caso, elimina un marcador individual recorriendo sus grupos de capas para encontrarlo y eliminarlo. Mientras realiza un bucle, busque un marcador con un atributo personalizado, en mi caso una 'clave', que se agregó cuando el marcador se agregó al grupo de capas. Agregue su 'clave' al igual que agregar un atributo de título. Más tarde, esto se obtiene como una opción de capa. Cuando encuentre esa coincidencia, usted .removeLayer () y se deshace de ese marcador en particular. ¡Espero que te ayude!

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);
                    }
                }
            }
        });
    });
}
Ronnie Royston
fuente
0

Puede ser que sea demasiado tarde para esto, pero aún así he creado un proyecto de hechicería abierta para hacer lo mismo junto con alguna otra cosa.

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

por favor, pague y haga una estrella si lo desea :)

Kishan Oza
fuente