React-google-maps縮放問題

Question

我正在使用react.google.maps並且嘗試根據縮放級別顯示不同的標記。 我的問題是，有時在縮放時，地圖不會更新（不會根據縮放級別重新渲染地圖圖塊）。 當我定義了onZoomChanged方法時，就會發生這種情況。 如果刪除它，一切正常。

這是我的班級樣子：

class Map extends Component {
  constructor(props) {
    super(props);

    this.googleMap = React.createRef();

    this.state = {
      zoom: 2
    };
  }

  onZoomChanged = () => {
    this.setState({
      zoom: this.googleMap.current.getZoom()
    });
  };

  getMarkers() {
    const { zoom } = this.state;
    let Markers = null;

    // get markers based on zoom

    return Markers;
  }

  render() {
    const { center } = this.props;

    return (
      <GoogleMap
        defaultZoom={2}
        defaultCenter={{
          lat: center.latitude,
          lng: center.longitude
        }}
        defaultOptions={{
          mapTypeControl: false,
          streetViewControl: false,
          zoomControl: false,
          fullscreenControl: false,
          styles: mapStyles,
          minZoom: 2,
          maxZoom: 10
        }}
        ref={this.googleMap}
        onZoomChanged={this.onZoomChanged}
      >
        {this.getMarkers()}
      </GoogleMap>
    );
  }
}

以下是一些屏幕快照來說明這種行為：

實際1

預期1

實際2

預期2

任何幫助，將不勝感激。 提前致謝！

Answer 1

好的...看來我的問題與中心有關，或者至少已解決了該問題：

onZoomChanged = () => {
  const newCenter = this.googleMap.current.getCenter();
  this.setState({
    zoom: this.googleMap.current.getZoom(),
    center: {
      latitude: newCenter.lat(),
      longitude: newCenter.lng()
    }
  });
};

我還更改了onIdle方法的中心：

onIdle = () => {
  const { center } = this.state;
  const newCenter = this.googleMap.current.getCenter();
  const centerLng = newCenter.lng();
  const centerLat = newCenter.lat();

  // other logic for bounds

  if (center.latitude !== centerLat || center.longitude !== centerLng) {
    this.setState({
      center: {
        latitude: centerLat,
        longitude: centerLng
      }
    });
  }
};