回应谷歌地图缩放问题

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