谷歌地图fitBounds不居中和显示标记在谷歌地图反应

Question

我在我的react应用程序中使用谷歌地图react来使用GMaps。这是我得到的代码：

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) => {
const { google } = mapProps;
markers.forEach(marker => {
bounds.extend(new google.maps.LatLng(marker.lat, marker.lng));
});

map.fitBounds(bounds);
}
return (
<>
<div className={props.className}>
<Map 
google={props.google}
style={{ borderRadius: '10px'}}
zoom={7}
onReady={adjustMap}
bounds={bounds}
initialCenter={{ lat: 47.444, lng: -122.176}}
>
{
markers.map((item) => {
return (
<Marker position={{lat: item.lat, lng: item.lng}}/>
)
})
}       
</Map>
</div>
<button onClick={(e) => { e.preventDefault(); const newMap = [...markers, {lat: 59.913, lng: 10.752}]; setMarkers(newMap)}}>Add marker</button>
</>
);  
}

因此，最初，地图是正确居中的，因为它显示了两个标记。但当我点击按钮添加另一个标记时，它只是显示一个随机区域，其中没有任何标记可见。

我参考了tidyline在这个线程中提出的建议，对其进行了轻微修改以修复错误，但这没有起作用。-https://github.com/fullstackreact/google-maps-react/issues/63

如何修复此问题以在添加其他标记时显示所有标记？

Answer 1

有两个问题：

1. onReady={adjustMap}将只执行一次，而不会在添加更多标记后执行
2. 单击处理程序为标记设置一个硬编码的位置，并且映射的边界不会用这个新标记更新。可能从处理程序调用adjustMap