Question

基于折线正确渲染react-leaflet贴图组件。折线在屏幕中间完美居中。

这是我的问题：我想以编程方式将地图重新定位到折线，因为界面占用了地图的空间，就像切换按钮一样。

如果没有反应，我知道该怎么做：

 map.invalidateSize();
 let bounds = L.latLngBounds(patharray);
 map.flyToBounds(bounds);

但是有了反应，我不知道如何访问这些方法。

我尝试在我的组件中这样：

ref={(ref) => this.mapRef = ref}

然后在ComponentWillReceiveProps（）中使用ref，如下所示：

componentWillReceiveProps() {
    const {flyToBounds} = this.props

    console.log(this.mapRef)

    if (flyToBounds) {
      this.mapRef.current.leafletElement.invalidateSize()
      this.mapRef.current.leafletElement.flyToBounds(this.bounds)
    }
 }

然而，无效的参数invalidSize和flyToBounds不可用。所以，现在我被卡住了。

Answer 1

我们在Map react-leaflet中提供了 bounds 道具，它可以根据所有提供的经纬度数组来更新地图。

bounds：边界（可选）：地图要包含的矩形。它将居中，地图将尽可能放大，同时仍显示完整范围。使用LatLngBounds的equals（）方法比较更改。

请查看链接https://react-leaflet.js.org/docs/en/components

React Leaflet：FlyToBounds以编程方式更改道具

1 个答案: