reactjs Map未在react leaf let中显示

46qrfjad 于 2022-12-18 发布在 React

关注(0)|答案(1)|浏览(99)

为什么React说明书中不显示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;

reactjs

来源：https://stackoverflow.com/questions/74831935/map-not-showing-in-react-leaflet

1条答案

按热度按时间

hi3rlvi21#

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

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

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs Map未在react leaf let中显示

1条答案

相关问题

热门标签

最新问答