Estoy usando un L.easyButton para agregar y eliminar un marcador de folleto según la ubicación actual. Este es mi código:
var marker; L.easyButton({ states: [{ stateName: 'on', title: 'Add Marker', onClick: function(btn, map) { map.locate({ setView: true, maxZoom: 16 }); function onLocationFound(e) { marker = L.marker(e.latlng).addTo(map); } map.on('locationfound', onLocationFound); btn.state('off'); } }, { stateName: 'off', title: 'Remove Marker', onClick: function(btn, map) { if (map.hasLayer(marker)) { map.removeLayer(marker); //map.removeControl(marker); } btn.state('on'); } }] }).addTo(map);El código funciona bien cuando se agrega y elimina el marcador por primera vez. Pero cuando volví a hacer clic en el botón, se puede agregar el marcador, pero no se eliminó.
FYI, el estado del botón se puede cambiar con éxito, solo que la función de eliminación no funciona.
Probé estas dos líneas de código en la función de eliminación, pero no funcionó.
map.removeLayer(marker); map.removeControl(marker);¿Cómo debo mejorar el código? Gracias por adelantado.
Lo que sucede es que las próximas veces que solicita una geolocalización y crea un Marcador correspondiente, en realidad apila su detector de eventos, por lo tanto, crea varios Marcadores en la misma posición.
Por lo tanto, al intentar eliminarlo más adelante, el último se eliminó correctamente, pero todavía hay algunos marcadores en esa posición, lo que da la impresión de que no pasó nada.
Una solución simple consiste en eliminar el detector de eventos después de que se haya utilizado, normalmente con el método .once( .once() (en lugar de .on() ):
map.once('locationfound', onLocationFound);