react leaflet基础教程地图不正确显示地图

Question

我按照 react 传单安装并得到了 setup page 。他们为我提供了一个代码片段，用于查看基本示例。然而，这就是我得到的。不确定我搞砸了哪些步骤。

import { GlobalStyle } from '../Theme';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import styled from 'styled-components';
import Header from '../components/Header';

const StyledLocationsPageContainer = styled.div`
    width: 100%;
    .leaflet-map-container {
        height: 25rem;
    }
`;

function Locations() {
    return (
        <StyledLocationsPageContainer>
            <GlobalStyle />
            <main>
                <Header />
                <div className="leaflet-map-container">
                    <MapContainer
                        center={[51.505, -0.09]}
                        zoom={13}
                        scrollWheelZoom={false}>
                        <TileLayer
                            attribution='&copy; <a href="http://osm.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>
            </main>
        </StyledLocationsPageContainer>
    );
}

export default Locations;

这是我的包 .json 文件：

    "dependencies": {
        "@testing-library/jest-dom": "^5.11.9",
        "@testing-library/react": "^11.2.3",
        "@testing-library/user-event": "^12.6.0",
        "leaflet": "^1.7.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-leaflet": "^3.0.5",
        "react-scripts": "4.0.1",
        "styled-components": "^5.2.1",
        "web-vitals": "^0.2.4"
    }

我在 index.html 中插入以下 link 后，它变成空白色 space，宽度和高度我分配给包装器 div，

    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

Answer 1

您需要明确地为您的 MapContainer 分配高度

 <MapContainer
       center={[51.505, -0.09]}
       zoom={13}
       scrollWheelZoom={false}
       style={{height: '100vh'}}> //here assign the height
>
...

而不是 MapContainer 的包装器按预期显示

Answer 2

我必须明确地导入传单 css 文件才能让它为我工作，即使在将高度和宽度添加到地图容器之后也是如此。

import "leaflet/dist/leaflet.css";

react leaflet基础教程地图不正确显示地图

react leaflet basic tutorial map do not display map correctly

javascript

leaflet

reactjs

react-leaflet