react-leaflet / Mapcontainer有問題

Question

組件渲染得很好，但它沒有顯示，所以我從 Inspect 更改了一些 css 屬性。 我將 map 容器放在 div 中的部分頁面中 - 但 map 的工作方式與 div 不同。 這是我的代碼。

<div className={style.map_container}> //this my container I wrote it
     <MapContainer style={{height:'80px',width:'80'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
       <TileLayer   attribution='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>

我還將 leaflet 的主要 css 放在 index.html

我不知道我在做什么，但我認為 css 有問題。

Answer 1

您應該分配的主要屬性是高度 - 我應該在我的組件的內聯 css 屬性中設置高度，

react-leaflet你必須考慮這個規則

<MapContainer style={{width:'90%',height:'99%'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>

噠噠噠！！！ map 工作得很好