react-google-maps：如何使用 fitBounds、panBy、panTo、panToBounds 公共 API？

根据反应谷歌地图库 https://github.com/tomchentw/react-google-maps/blob/master/src/lib/GoogleMap.js#L125-L131，您可以从 ref 对象调用这四个方法。

看起来奇怪的是，这些方法应该接收两个参数，一个地图实例和其他参数，如下所示：

fitBounds(map, args) { return map.fitBounds(...args); }

但是，当以这种方式调用 fitBounds() 时，地图上不会发生任何事情，不会更改边界，也不会引发错误。这是我构造组件的方式，在 componentDidUpdate 中调用 fitBounds：

import React from 'react'
import { withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView } from 'react-google-maps'
import InfoBox from 'react-google-maps/lib/addons/InfoBox'
import map from 'lodash/map'

// Higher-Order Component
const AllocatedPlacesMap = withGoogleMap(props => (
  <GoogleMap
    center={props.center}
    defaultZoom={4}
    options={{ scrollwheel: false, minZoom: 3, maxZoom: 15 }}
    onCenterChanged={props.onCenterChanged}
    ref={props.onMapMounted}>
    {props.markers.map((marker, index) => (
      <Marker
        key={index}
        position={marker.position}
      />
    ))}
  </GoogleMap>
));

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getCenter = () => {
    this._bounds = new google.maps.LatLngBounds();

    this.props.markers.forEach((marker, index) => {
      const position = new google.maps.LatLng(marker.lat, marker.lng);
      this._bounds.extend(position);
    });

    return this._bounds.getCenter();
  }

  componentDidUpdate() {
    this._map.fitBounds(this._map, this._bounds);
  }

  handleMapMounted = (map) => {
    this._map = map;
  }

  render() {
    return (
      <div className="allocated-places">
        <AllocatedPlacesMap
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div style={{ height: `100%` }} />
          }
          center={this.getCenter()}
          markers={props.markers}
          onMapMounted={this.handleMapMounted}
        />
      </div>
    )
  }
}

export default Map;

知道在这种情况下调用 fitBounds() 的正确方法是什么吗？这方面似乎缺乏文档和示例。

查看函数定义fitBounds(map, args) { return map.fitBounds(...args); }我们可以看到扩展运算符 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator应用于 args。这表明args应该是一个数组。

因此，在您的代码中，第二个参数应该是数组类型：

this._map.fitBounds(this._map, [this._bounds]);

您还可以包含数组的第二个元素，该元素将转换为第二个可选参数padding地图 JavaScript API 的fitBound() https://developers.google.com/maps/documentation/javascript/reference#Map method.

this._map.fitBounds(this._map, [this._bounds, 100]);

希望这可以帮助！