地图未显示在反应传单中

Question

为什么在react传单中没有显示地图?

import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

<div style={{ width: "100%", height: "100vh" }}>
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<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={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
export default App;

Answer 1

您错过了为MapContainer添加样式表，现在它的高度为0。您应该将样式style={{ width: "100%", height: "100vh" }}添加到MapContainer，看看下面的代码:

import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
export default function App() {
return (
<div>
<MapContainer
style={{ width: "100%", height: "100vh" }}
zoom={13}
center={[51.505, -0.09]}
scrollWheelZoom={false}
fadeAnimation={true}
markerZoomAnimation={true}
>
<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={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
);
}

现场演示:https://codesandbox.io/s/throbbing-cherry-s5mb4p?file=/src/App.js:0-735