React-leaflet 不显示加载了 leaflet.css 或调整大小的地图答案

【问题标题】：React-leaflet doesn't display the map with leaflet.css loaded nor resizingReact-leaflet 不显示加载了 leaflet.css 或调整大小的地图
【发布时间】：2022-04-04 01:50:48
【问题描述】：

我正在使用小册子做一个反应项目，但它不显示地图，这是地图组件：

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;

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 中没有样式表时它的显示方式：

这是它在样式表中的显示方式，就像什么都没有：

这里也是依赖：

"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"
},

谢谢

【问题讨论】：

地图容器高度在哪里？
是内联的，阅读各种例子和讨论最好有它吧？
在第一张图片中，您的图块似乎正确获取，但 css 已关闭。在第二张图片中，您的地图 css 看起来正确（正确的地图容器和控件放置），但似乎没有图块，正如您的地图只是一个具有您指定的背景颜色的空 div 的事实所示。您确定在第二种情况下您的地图图块被正确获取了吗？
对，我错过了，对不起。任何地方都可以，只要在 Leaflet 实例化地图时已经应用。或者使用 invalidateSize。
此时，最好提供一个实时复制示例，例如使用 StackBlitz 或 CodeSandbox。

标签： reactjs leaflet react-leaflet

【解决方案1】：

您应该导入 css 表单传单 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;
}

还要记住我正在使用

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

版本

【讨论】：

【解决方案2】：

在头 index.html 中包含 css <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

【讨论】：