在 React 中将更改标记数组应用于 Google 地图

Question

在 React 中将更改标记数组应用到 Google 地图我的 React 应用程序中有一张 Google 地图，它允许显示一个标记在地图上移动（因为纬度每隔几秒就会更改一次）

但是，如果我有一个标记数组（不断使用具有相应 latitude/longitude 的新标记进行更新），是否可以循环遍历这些标记并将它们添加到地图中。它需要不断检查它们没有改变位置，或者新标记没有出现在数组中，或者没有从数组中删除。本质上，它看起来像这样：

    const Map = ({ location, zoomLevel, markers }) => {
        for(let marker of markers)
        {
            const [marker.markerLatVal, marker.setMarkerLatVal] = 
            useState(marker.markerLat)
        }

    useEffect(() => {
        const interval = setInterval(() => {
            changeMarkerLatitude();
        }, 2000);
        return () => clearInterval(interval);
    }, []);

    const changeMarkerLatitude = () => {
        for(let marker of markers)
        {
           marker.setMarkerLatVal(prev => prev + 50);
        }
    };
 
        return (
            <div className='map'>
                <div className='google-map'>
                    <GoogleMapReact
                     for(let marker of this.markers)
                     {
                        <MyGreatPlace lat={marker.markerLat} 
                         lng={marker.markerLong} text= 
                         {marker.markerText} />
                     }
                    </GoogleMapReact>
                </div>
            </div>
        );
 
}


 Is this possible?

Answer 1

由于这是 non-working 代码，我无法真正调试它，但这应该可以帮助您完成 99.9999% 的工作。

const Map = ({ location, zoomLevel, markers: markersList }) => {
    // We set a state array with the markers (renaming markersList in props to avoid collisions)
    const [markers, setMarkers] = useState(markersList)

    useEffect(() => {
        const interval = setInterval(() => {
            changeMarkerLatitude();
        }, 2000);
        return () => clearInterval(interval);
    }, []);

    const changeMarkerLatitude = () => {
        // map over each marker, keep original values by spreading old state, only modify what we want to change
        markers.map(marker => {
          setMarkers( prev => {
            ...prev,
            marker.latitude: marker.latitude += 50 //whatever you want here
          }
        }
    };
 
        return (
            <div className='map'>
                <div className='google-map'>
                    <GoogleMapReact
                     markers.map(marker => {
                        <MyGreatPlace lat={marker.markerLat} 
                        lng={marker.markerLong} text= 
                        {marker.markerText} />
                     })
                    </GoogleMapReact>
                </div>
            </div>
        );

}

在 React 中将更改标记数组应用于 Google 地图

Apply changing markers array to Google map in react

javascript

html

reactjs

google-maps