Estoy tratando de agregar y eliminar marcadores en mi mapa, pero tengo un problema cuando intento eliminarlos. El usuario hace clic en el mapa y pone tantos marcadores como quiera. Cuando hace clic en la ventana emergente de un marcador específico, puede eliminarlo. Si por ejemplo el usuario pone 3 marcadores y quiere borrar el segundo, cuando lo hace, el segundo Y TERCER marcador desaparecen del mapa. . Guardo las coordenadas en el gancho de estado de uso y, aunque actualizo correctamente la matriz cuando elimino el marcador, los marcadores no parecen volver a representarse correctamente. ¿Tienes alguna idea de lo que podría estar mal?
Muchísimas gracias :)
Aquí está el componente AddMarker
function AddMarker() { const [coord, setPosition] = useState([]); const map = useMapEvents({ click: (e) => { setPosition([...coord,e.latlng]) const mark = e }, }) useEffect(() => { console.log( coord); }, [coord]); const removeMarker = (index, map) => { map.eachLayer((layer) => { if (layer.options && layer.options.pane === "markerPane") { if (layer.options.uniceid === index) { console.log(layer.options.uniceid) console.log(index) map.removeLayer(layer); var array = [...coord]; array.splice(index, 1); setPosition(array) console.log(array) //coord.splice(index,1); //setPosition(coord=> [...coord]); //console.log(coord) } } }); } return ( <div> {coord.map((pos, idx) => <Marker key={`marker-${idx}`} uniceid={idx} position={pos} icon ={blue} draggable={true} eventHandlers={{ click: (e) => {console.log(e.latlng)},}}> <Popup> <PopupForm data ={pos} id={idx} formData={() => removeMarker(idx, map)}></PopupForm> </Popup> </Marker> )} </div> ); }No necesita recorrer cada capa del mapa como lo hace. ¡Solo necesita filtrar las coordenadas del marcador en el que se hizo clic para que no se incluyan más en su variable de estado y eso es todo!
Aquí hay un ejemplo simplificado con un botón normal dentro de la ventana emergente
const removeMarker = (pos) => { setPosition((prevCoord) => prevCoord.filter( (prevCoord) => prevCoord.filter((coord) => JSON.stringify(coord) !== JSON.stringify(pos)) // or (coord) => coord.lat !== pos.lat && coord.lng !== pos.lng ) ); }; ... return ( <div> {coord.map((pos, idx) => ( <Marker key={`marker-${idx}`} position={pos} draggable={true} eventHandlers={{ click: (e) => { console.log(e.latlng); } }} > <Popup> <button onClick={() => removeMarker(pos)}>Remove marker</button> </Popup> </Marker> ))} </div> );