React-google-maps 缩放问题

Question

我正在使用 react.google.maps 并尝试根据缩放级别显示不同的标记。我遇到的问题是，有时当我缩放时，地图不会更新（地图图块不会根据缩放级别重新渲染）。当我定义了 onZoomChanged 方法时会发生这种情况。如果我删除它，一切正常。

这是我的 class 的样子：

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>
    );
  }
}

这里有一些屏幕截图来说明该行为：

Actual 1

Expected 1

Actual 2

Expected 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
      }
    });
  }
};

React-google-maps 缩放问题

React-google-maps zoom issue

zooming

reactjs

react-google-maps