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.
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='© <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