Aplicar la matriz de marcadores cambiantes al mapa de Google en reaccionar Tengo un mapa de Google en mi aplicación de reacción que permite que se muestre un solo marcador moviéndose alrededor del mapa (ya que la latitud cambia cada pocos segundos)
Sin embargo, si tuviera una matriz de marcadores (que sigue actualizándose con nuevos marcadores con la latitud/longitud correspondiente), ¿hay alguna manera de recorrer estos marcadores y agregarlos al mapa? Tendría que seguir comprobando que no hayan cambiado de ubicación, o que no hayan aparecido nuevos marcadores en la matriz, o que no se hayan eliminado de la matriz. Esencialmente, se vería algo como esto:
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?Dado que este es un código que no funciona, realmente no puedo depurarlo, pero esto debería brindarle el 99.9999% del camino.
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> ); }