react-leaflet基本示例渲染

Question

我第一次使用传单和反应传单并使用他们的基本示例这里

地图被分成多个部分，其中一半不可见。

<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>

使用的版本是 传单：1.9.4 反应传单：4.2.1 反应：18.2.0

Answer 1

您只需要导入leaflet CSS文件并设置MapContainer的高度和宽度，类名为leaflet-container

// Component file
import "leaflet/dist/leaflet.css"

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

别忘了安装传单包

npm install leaflet