Reactjs map 未显示在react 传单中

发布于12月17日

为什么在Reaction传单中没有显示 map ？

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;

推荐答案

您错过了将样式表添加到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