quiero eliminar todos los marcadores del mapa e intentar eliminar marcadores con map.remove
Estoy usando vue.js con un folleto para mostrar el mapa. Obtuve un objeto para registrar lng y lat.
router_planning: [ { car: [ { name: "001", lat: 25.042474, lng: 121.513729, }, { name: "002", lat: 24.982474, lng: 121.613729, }, { name: "003", lat: 24.894474, lng: 121.623729, }, ], }, { car: [ { name: "004", lat: 24.982474, lng: 121.513729, }, { name: "005", lat: 24.882474, lng: 121.513729, }, { name: "006", lat: 24.982474, lng: 121.713729, }, ], }, ],y dos funciones debajo de initmap() //set view
initmap() { this.mapp = L.map("map"); this.mapp.setView( [ this.router_planning[0].car[0].lat, this.router_planning[0].car[0].lng, ], 10 ); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 13, minZoom: 9, }).addTo(this.mapp); },make_map() //dar marcador de mapa
make_map() { for (let i = 0; i < this.router_planning.length; i++) { for (let j = 0; j < this.router_planning[i].car.length; j++) { L.circleMarker( [ this.router_planning[i].car[j].lat, this.router_planning[i].car[j].lng, ], { color: this.circle_marker[i], fillColor: this.circle_marker[i], fillOpacity: 1, radius: (i + 1) ** 2, } ) .addTo(this.mapp) .bindTooltip(this.router_planning[i].car[j].name.toString(), { permanent: true, }); } },mi web debería funcionar así primero initmap() luego make_map()
tengo un botón para activar make_map() para cambiar lat y lng
pero el viejo marcador no desapareció
he intentado agregar
this.mapp.remove() en la parte superior de make_map()
Recibí un mensaje de error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'appendChild')he intentado agregar esto a la parte superior de make_map sin error
pero no borró el marcador
var container = L.DomUtil.get('map'); container._leaflet_id = null;He visto muchos artículos para borrar el mapa, pero aún no funcionó. Me vuelve loco descubrir por qué no puedo borrar o eliminar el mapa.
muchas gracias
Para eliminar todos los marcadores del mapa, primero debe almacenarlos en algún lugar.
Puede almacenar todos los marcadores dentro de una matriz:
const markers = []; const marker = L.circleMarker([...]) .bindTooltip([...]) .addTo(map); markers.push(marker);Y para eliminarlos necesitas llamar a:
for(let i = 0; i < markers.length; i++) { map.removeLayer(marker[i]); } Pero hay una mejor manera de hacerlo si no necesita eliminar un marcador específico, use LayerGroup() .
Ejemplo:
const layerGroup = new L.LayerGroup(); const marker = new L.marker([...]).addTo(layerGroup); //after you've added all markers to layerGroup(): map.addLayer(layerGroup) Y para eliminar todos los marcadores simplemente llame: map.removeLayer(layerGroup)