React-leaflet不显示加载了leaflet.css的地图，也不调整大小

Question

我正在做一个使用leaflet的react项目，但它不显示de map，下面是Map组件：

import React from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "./map.css";
    
function Map({center, zoom }) {
    return (
        <MapContainer
            className="map"
            center={center}
            zoom={zoom}
            scrollWheelZoom={false}
            style={{height:'450px'}}
        >
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
        </MapContainer>
    );
}
    
export default Map;

The index.html

<meta
  name="description"
  content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;500;700;900&display=swap" rel="stylesheet">

css：

.map {
    background-color: #424242;
    padding: 1rem;
    border-radius: 20px;
    margin-top: 16px;
    box-shadow: 0 0 8px -4px rgba(0, 0, 0, 0.5);
}

下面是它在index.html中没有样式表时的显示方式：

​

​

下面是它在stlyesheet中的显示方式，它不像任何东西：

​

​

下面是依赖关系：

"dependencies": {
    "@material-ui/core": "^4.11.4",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "chart.js": "^3.2.0",
    "leaflet": "^1.7.1",
    "numeral": "^2.0.6",
    "react": "^17.0.2",
    "react-chartjs-2": "^3.0.3",
    "react-dom": "^17.0.2",
    "react-leaflet": "3.0.5",
    "react-scripts": "4.0.3",
    "sass": "^1.32.11",
    "web-vitals": "^1.1.1"
},

谢谢

Answer 1

您应该导入css表单leaflet dist

import "leaflet/dist/leaflet.css";

这是我做的样板

/* eslint-disable */
import React, { useRef, useState } from "react";
import { Map, TileLayer, LayersControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";


const App = () => {
  const mapRef = useRef();
  const [bounds, setbounds] = useState([
    [-90, -180],
    [90, 180],
  ]);

  return (
    <>
      <Map
        ref={mapRef}
        center={[0, 0]}
        zoom={3}
        maxZoom={19}
        minZoom={2}
        bounceAtZoomLimits={true}
        maxBoundsViscosity={0.95}
        maxBounds={bounds}
      >
        <LayersControl position="topright">
          <LayersControl.BaseLayer name="OpenStreet">
            <TileLayer
              noWrap={false}
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="Satellite">
            <TileLayer
              noWrap={false}
              url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer checked name="Dark">
            <TileLayer
              noWrap={false}
              url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
            />
          </LayersControl.BaseLayer>
        </LayersControl>
      </Map>
    </>
  );
};

export default App;

别忘了用这个类创建一个css

.leaflet-container {
  width: 100%;
  height: 100vh;
}

还请记住，im使用

"react-leaflet": "^2.7.0",
"leaflet": "^1.7.1"

版本