无法拖动以移动、放大或缩小谷歌地图反应

Question

我正在尝试在地图中显示几个标记。单击按钮后，我添加一个标记并重新居中地图以显示所有标记。

function MapContainer(props) {
var bounds = new props.google.maps.LatLngBounds(); 
const [markers, setMarkers] = useState([
{
lat: 55.378, 
lng: 3.436
}, 
{
lat: 37.0902, 
lng: 95.712
}
]);
const adjustMap = (mapProps, map) => {
map.fitBounds(bounds);
}
useEffect(() => {
for (var i = 0; i < markers.length; i++)
bounds.extend(new props.google.maps.LatLng(markers[i].lat, markers[i].lng))
}, [markers])
return (
<>
<div className={props.className}>
<Map 
google={props.google}
style={{ borderRadius: '10px'}}
zoom={7}
bounds={bounds}
onBoundsChanged={adjustMap}
>
{
markers.map((item) => {
return (
<Marker position={{lat: item.lat, lng: item.lng}}/>
)
})
}       
</Map>
</div>
<button onClick={(e) => { e.preventDefault(); console.log("hehe"); const hoho = [...markers, {lat: 59.913, lng: 10.752}]; setMarkers(hoho)}}>Add marker</button>
</>
);  
}

现在的问题是，我不能拖动来移动地图，也不能放大或缩小。如果我删除onBoundsChanged属性，我可以拖动和缩放，但如果我包括它，拖动和缩放就不起作用。

我该怎么解决这个问题？

Answer 1

您处于一个无限循环中，因为react没有对您的道具进行深度差异，并且您的道具不断变化，因为它是一个新的LatLngBounds对象。尝试将基元作为道具而不是对象传递。

请参阅https://github.com/googlemaps/js-samples/issues/946以便对此进行进一步讨论。