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

Posted 2023-03-06

【中文标题】Leaflet.js 地图不占用全宽 [React.js]

【英文标题】：Leaflet.js Map Not taking up Full Width [React.js]

【发布时间】：2021-03-07 22:27:19

【问题描述】：

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

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

【参考方案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