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

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

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.

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

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

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.

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

    }

    }  

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

¿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)

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

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 :)