使 react-leaflet 地图组件自行调整大小以适应可用 space

Question

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

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

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 component 解决了这个问题，它将 width/height 作为道具传递给它的 child:

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

...

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

Answer 3

我通过在我的 .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 4

在 MapContainer 上将 min-height 和高度设置为 100% 对我有效：

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

使 react-leaflet 地图组件自行调整大小以适应可用 space

Make react-leaflet map component resize itself to fit available space

react-leaflet