无法拖动移动、放大或缩小 google-maps-react

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 没有对你的 props 做深度差异，你的 props 不断变化，因为它是一个新的 LatLngBounds 对象，一遍又一遍。尝试将基元作为道具而不是对象传递。

有关此问题的进一步讨论，请参阅 https://github.com/googlemaps/js-samples/issues/946。

无法拖动移动、放大或缩小 google-maps-react

can't drag to move, zoom in or out google-maps-react

reactjs

google-maps

google-maps-react