Leaflet.js 地图不占用全宽 [React.js]

【问题标题】：Leaflet.js Map Not taking up Full Width [React.js]Leaflet.js 地图不占用全宽 [React.js]
【发布时间】：2021-03-07 22:27:19
【问题描述】：

即使在 CSS 中声明了 100% 的全高，我也有一个 Leaflet.js 地图在 div 内没有显示为全高或全宽。代码和视频如下。

https://codesandbox.io/s/determined-napier-wywxg

【问题讨论】：

标签： javascript css reactjs leaflet react-leaflet

【解决方案1】：

在MapContainer 上为您的父div 提供等于100% 的宽度和高度，并在MapContainer 上收听whenCreated 道具事件。将map.invalidateSize 与setInterval 事件结合使用

 <LeafletMap  center={[34.80746, -40.4796 ]} zoom={3} 
              whenCreated={map => setInterval(() =>{ map.invalidateSize()}, 100)}
              style={{width: '100%', height: '100%'}}>
              <TileLayer 
               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
               attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              />
  </LeafletMap>

Demo

【讨论】：