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

Question

设置 Map 组件的宽度有效，但高度似乎只响应以像素为单位的绝对大小。

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

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

我通过使用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 3

我通过在我的 .css 文件中将传单容器的高度设置为 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;