React Leaflet Map未显示

Question

我有来自React-leaflet的基本示例，但对于我来说，我无法获得任何可显示的东西。我使用来自Jeremy Monson的this fix来解决常见的巴别塔加载程序问题。当我浏览manual fixes时，我也遇到了同样的问题，没有显示。现在我正在使用样式组件，但是我在使用常规CSS时遇到了同样的问题。我的地图组件页面如下所示。

import React from 'react'
import styled from '@emotion/styled'
import { MapContainer, TileLayer, Marker, Popup } from '@monsonjeremy/react-leaflet'

const Leaflet = styled.div`
height:500px;
width:500px;
`

const Map = () => {
 return (
  <Leaflet>
   <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>
  </Leaflet>

  
 )
}

export default Map

我正在加载我的index.html页面头部的小叶css。我在App.js中导入我的地图组件并在那里渲染它。任何想法或指向正确的方向都将非常感谢。

Answer 1

使用style prop将高度添加到地图容器：

<MapContainer 
  center={[51.505, -0.09]} 
  zoom={13} 
  scrollWheelZoom={false}
  style={{height: '100%'}} // Add a height
>
...