jquery - remove - Leaflet: ¿cómo encontrar marcadores existentes y eliminar marcadores?
leaflet tutorial español (8)
¿Has probado layerGroup todavía?
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 marcadores fácilmente.
var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)
Empecé a usar el folleto como un mapa de fuente abierta, 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 (en mi código) elimine los marcadores existentes, ni 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
(1) agregue grupo de capas y matriz para mantener capas y referencias a capas como variables globales:
var search_group = new L.LayerGroup (); var clickArr = new Array ();
(2) agregar mapa
(3) Agregar capa de grupo al mapa
map.addLayer (grupo de búsqueda);
(4) la función agregar al mapa, con una ventana emergente que contiene un enlace, que al hacer clic tendrá una opción de eliminar. Este enlace tendrá, como id, el latitud larga del punto. Esta identificación se comparará con cuando hace clic en uno de los 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 eliminar, compara el marcador de latitud larga con el ID disparado 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);
}
}
}
Aquí está el código y la demostración para Agregar el marcador , eliminar cualquiera de los marcadores y obtener todos los marcadores presentes / agregados :
Aquí está el código completo de JSFiddle . También aquí está la demo de página completa .
Agregar 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);
}
Borrando 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);
});
}
Obtener 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 método onMapClick , luego elimínelos haciendo clic en un enlace.
El proceso es similar al de los no definidos: agrega cada marcador nuevo a una matriz de markers para que puedas acceder a un marcador específico cuando quieras interactuar más tarde.
Cuando guarda la reverencia al marcador en la función de adición, el marcador puede eliminarlo por sí mismo. No hay 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]);
}
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, borre un marcador individual al recorrer sus grupos de capas para encontrarlo y eliminarlo. Mientras bucleo, busque un marcador con un atributo personalizado, en mi caso una ''clave'', agregado 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 recibe una opción de capa. Cuando encuentras esa coincidencia, eliminas a Lyer () 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);
}
}
}
});
});
}
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]);
}
}
tienes que poner tu "marcador de var" fuera de la función. Luego, más tarde, puedes 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 último marcador borra el marcador var. Entonces, una forma de hacerlo es crear una matriz global de marcador y agregar su marcador en la matriz global.