因为 的内容Map在componentDidMount-time不可用（https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-161594328）你无法FeatureGroup在那个时候得到的界限，而且 refs你分配，只有Mapref 将在this.refs.

然而，按本GitHub的评论：https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-366263225你可以给FeatureGroup一个onAdd处理函数：

<FeatureGroup ref="features" onAdd={this.onFeatureGroupAdd}>...

然后您可以使用Maprefs 访问leafletElement并调用fitBounds传入事件目标的边界，这将是FeatureGroup：

  onFeatureGroupAdd = (e) => {
    this.refs.map.leafletElement.fitBounds(e.target.getBounds());
  }

然后，这将FeatureGroup根据需要将地图“放大”到您的 边界。

更新

我修改了我的 React 组件，以便缩放和中心由查询参数控制。上述解决方案的问题在于MarkerClusterGroup，例如，如果您通过单击放大 a ，它将更新 url 中的缩放，重新渲染地图并重新调用onFeatureGroupAdd，从而撤消所有标记集群的优点。

我需要的是访问保持新绘制的圆圈在边界内所需的缩放级别，然后使用正确的缩放级别和中心更新 url。

  onDrawCircle = (e) => {
    ...
    var targetZoom = this.refs.map.leafletElement.getBoundsZoom(e.layer.getBounds());
        // Call function to update url here:
        functionToUpdateUrl(targetZoom, e.layer.getBounds().getCenter());
    }
  }

为了能够控制整个地图，我还调用functionToUpdateUrl了onZoomEnd和onDragEnd事件处理程序，如下所示：

  onChangeView = (e) => {
      functionToUpdateUrl(e.target._zoom, this.refs.map.leafletElement.getCenter());
  }

一个用于处理集群点击：

  onClusterClick = (e) => {
     // This time we want the center of the layer, not the map?
     functionToUpdateUrl(e.target._zoom, (e.layer ? e.layer.getBounds().getCenter() : e.target.getBounds().getCenter()));
  }

然后，在渲染 Map 元素时，传递以下属性：

  <Map
    center={center}
    ref='map'
    zoom={zoom}
    maxZoom={18}
    onZoomEnd={this.onChangeView}
    onDragEnd={this.onChangeView}
  >
  ....
  </Map>

并记住给 anyMarkerClusterGroup的onClusterClick回调：

<MarkerClusterGroup onAdd={this.onMarkerGroupAdd} onClusterClick={this.onClusterClick}>

你有没有试过getBounds在componentDidMount函数中而不是componentWillMount? 如果这不起作用，那么我建议扩展FeatureGroup组件并添加一个onLoaded函数作为 prop 并在componentDidMount扩展组件的函数中调用该函数。通过扩展FeatureGroup组件，我实际上是指从这里复制/粘贴它。（如果您关心为什么需要复制整个文件，请检查此线程）

这未经测试，但您的代码可能看起来像

import { FeatureGroup } from 'leaflet';

import { withLeaflet, Path } from 'react-leaflet';

class CustomFeatureGroup extends Path {
  createLeafletElement(prop) {
    const el = new FeatureGroup(this.getOptions(props));
    this.contextValue = {
      ...props.leaflet,
      layerContainer: el,
      popupContainer: el,
    };
    return el;
  }

  componentDidMount() {
    super.componentDidMount();
    this.setStyle(this.props);
    /*
     Here you can do your centering logic with an onLoad callback or just
     by using this.leafletElement.map or whatever
    */
    this.props.onLoaded();
  }
}

export default withLeaflet(CustomFeatureGroup)

注意：如果您使用的是react-leafletV1，这实际上更容易，如果需要，我可以使用该代码编辑此答案。