使react-leaflet地图组件调整自身大小以适应可用空间

Question

设置地图组件的宽度是可行的，但高度似乎只响应以像素为单位的绝对大小。

是否可以让地图控件自动消耗父元素内的可用空间？

Answer 1

我能够创建一个组件，该组件传入地图高度的组件状态值。我创建了一个辅助函数，可以调整高度大小以使其全部响应。

...

export default class MapContainer extends React.Component {

  updateDimensions() {
    const height = window.innerWidth >= 992 ? window.innerHeight : 400
    this.setState({ height: height })
  }

  componentWillMount() {
    this.updateDimensions()
  }

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions.bind(this))
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this))
  }

  ...

  render() {
    ...
    return (
      <div class="map-container" style={{ height: this.state.height }}>
        <Map>
          ...
        </Map>
      </div>
    )
  }
}

Answer 2

在 MapContainer 上将最小高度和高度设置为 100% 对我来说是有效的：

<div style={{ height: "175px" }}><MapContainer style={{ height: "100%", minHeight: "100%" }} ...</div>

Answer 3

我通过使用

react-container-dimensions

组件解决了这个问题，它将宽度/高度作为道具传递给它的孩子：

<div className="div that can resize""
ContainerDimensions>
<MyMapContainer/>
</ContainerDimensions>
</div>

...

style.width = Math.floor(this.props.width);                                                                                                                                                                                                                                                                                              
return (                                                                                                                                                                          
  <Map style={style}

Answer 4

我通过在 .css 文件中将 leaflet-container 的高度设置为 100% 解决了这个问题。

.leaflet-container {
    height: 100%;
}

我的地图组件如下所示：

const Map = () => {

    return (
        <MapContainer center={[51.4381, 5.4752]} zoom={10} >
            <TileLayer
                maxZoom='20'
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
        </MapContainer> 
    )
}

export default Map;

Answer 5

我已经使用

display: flex

解决了这个问题，并与

flex: 1

结合使用

<MapContainer />

。 完整的解决方案如下所示：

<div classname="map-container">
   <MapContainer
      .
      .
      style={{ flex: 1, width: '100%' }}
   />
</div>

.map-container {
   display: flex;
   height: whatever u want;
}

效果很好，如果我们的组件按列方向弯曲（页眉和页脚固定高度，则添加到

.map-container

flex-property

flex: 1

）

Answer 6

在您的组件中包含导入“leaflet/dist/leaflet.css”。