Google 地图 fitBounds 未居中并在 google-maps-react 中显示标记

Question

我在我的 React 应用程序中使用 google-maps-react 来使用 GMap。这是我得到的代码：

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

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

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

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

Answer 1

目前有两个问题：

onReady={adjustMap}只会执行一次，不会在添加更多标记后执行
您的点击处理程序为标记设置了硬编码位置，并且地图的边界未使用此新标记进行更新。也许从处理程序调用 adjustMap？

Google 地图 fitBounds 未居中并在 google-maps-react 中显示标记

Google Maps fitBounds not centering and showing markers in google-maps-react

reactjs

google-maps

google-maps-react