0
188
ViewsReact Leaflet Bound no funciona como se esperaba
Estoy usando el paquete react-leaflet para crear una animación enlazada en el mapa a partir de marcadores seleccionados, como se ve en la captura de pantalla a continuación.
Aquí está el código completo: https://codesandbox.io/s/react-leaflet-marker-with-bound-869mj
El mapa se vinculará si solo cambian los marcadores seleccionados.
Intento implementar el código de muestra de animación enlazado de la documentación aquí https://react-leaflet.js.org/docs/example-view-bounds/
Como podemos ver en la captura de pantalla anterior, el mapa, los marcadores, el rectángulo y el panel (esquina superior derecha) se muestran y funcionan correctamente.
Pero si cambiamos los marcadores seleccionados (a través del panel), la animación enlazada no funciona correctamente (no muestra todos los marcadores).
Y si vaciamos los marcadores seleccionados (no hay ningún marcador seleccionado en el panel), la aplicación falla y produce un error Cannot read properties of undefined (reading 'lat') .
Entonces, mis preguntas son:
- ¿Cómo pudo pasar esto?
- ¿cuál es la solución?
2 answers
Answer question0
El error Cannot read properties of undefined (reading 'lat') se debe a que está pasando una matriz vacía de marcadores a <Rectangle> . Necesita al menos dos marcadores para definir las esquinas de un rectángulo, así que verifique que tenga al menos dos:
{/* RECTANGLE */} {markerList && markerList.length >= 2 && ( <Rectangle bounds={markerList} pathOptions={{ color: "red" }} /> )}0
Finalmente, pude hacerlo después de actualizar directamente el valor más reciente de los límites (lista de ubicaciones) dentro de la función onCheckboxChange . Por lo tanto, el useEffect con los lugares selectedPlaces ya no es necesario.
const onCheckboxChange = (inputIndex) => { let newPlaces = [...selectedPlaces]; newPlaces[inputIndex].selected = !newPlaces[inputIndex].selected; setSelectedPlaces(newPlaces); let newBounds = selectedPlaces.filter((item) => item.selected); newBounds = newBounds.map((item) => item.location); setBounds(newBounds); map.fitBounds(newBounds); }; useEffect(() => { map.fitBounds(initialBounds); }, []);Aquí está la demostración de trabajo: https://codesandbox.io/s/learn-react-leaflet-cnk8tm