Cuando hago clic en el botón "Buscar patrimonio", quiero mostrar el mapa en mi página web. Sin embargo, el mapa del folleto no se puede mostrar correctamente como se muestra a continuación:

visualización de la página web

El mapa se puede mostrar completamente sin ningún problema una vez que cambio el tamaño de mi página web. He encontrado algunas soluciones que pueden resolver este problema en función del componente de clase, pero no tengo idea de cómo resolverlo cuando uso un componente funcional.

Aquí está mi código actual.

1. folleto.tsx

 import "./leaflet.css"; import { MapContainer, TileLayer, useMap, Popup, Marker } from "react-leaflet"; export default function Leaflet() { const mapRef: any = createRef(); useEffect(() => { const map = mapRef.leafletElement; setTimeout(() => { map.invalidateSize(); }, 1000); }, [mapRef]); return ( <div className="map"> <MapContainer center={[22.3193, 114.1694]} zoom={10} scrollWheelZoom={false} ref={mapRef} > <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[50.5, 30.5]}> <Popup></Popup> </Marker> </MapContainer> </div> ); }

2.folleto.css

 font-family: sans-serif; text-align: center; } .leaflet-container { height: 600px; width: 100%; } .leaflet-div-icon { background: transparent; border: none; }

Estoy usando el folleto de reacción ^ 4.0.0