Comencé a usar React.js últimamente y estaba trabajando en un proyecto usando React-Leaflet-js. Mi problema es que mi MapContainer no cambia el center de la página cada vez que se actualiza la variable de position en el siguiente código:
... render() { const position = [this.state.location.lat, this.state.location.lng]; return ( <MapContainer className="map" center={position} zoom={this.state.zoom} scrollWheelZoom={true}> ... Como referencia, la variable de state que se está actualizando tiene este aspecto:
state = { location: { lat: 40.7128, lng: -74.0060, }, haveUsersLocation: false, zoom: 13, } Lo extraño es que un marker con una position establecida en {position} se actualizará automáticamente cuando cambie la variable de position , pero no el center del MapContainer . No estoy seguro de por qué el map no responde y ajusta su center .
Nota: Traté de mirar esto pero no respondió mi pregunta. Por favor ayuda.
La propiedad del center simplemente inicializa el mapa, si desea actualizar el centro del mapa que se muestra realmente, debe usar setView o flyTo si desea una animación fluida. Para obtener una referencia de Leaflet Map, debe usar el gancho useMap .
function FlyMapTo() { const map = useMap() useEffect(() => { map.flyTo(position) }, [position]) return null } return ( <MapContainer className="map" center={position} zoom={this.state.zoom} scrollWheelZoom={true}> <FlyMapTo /> </MapContainer> )