Tengo una lista de caminatas almacenadas en state y representé la ubicación de esas caminatas como marcadores en el componente de mapa de Google de la siguiente manera:
{hikes.map(hike => <Marker position={{lat: hike.coordinates.latitude, lng: hike.coordinates.longitude}} icon = { { url:"https://static.thenounproject.com/png/29961-200.png", scaledSize : new google.maps.Size(50,50) } } onClick={()=>{console.log(hike.name)}} /> También muestro la lista de caminatas y sus otros detalles en su propio componente BusinessCard así
export const Businesses = (props)=>{ const {hikes, addToTrip} = props return(<> <div className="businessesColumn"> {hikes.map(hike=>( <BusinessCard.../> ))} Cuando paso el cursor sobre cada uno de los componentes de BusinessCard , quiero que el marcador correspondiente anime el "rebote". Intenté manipular google.maps.event.addListener pero creo que lo estaba haciendo mal. No estoy seguro de si puede detectar eventos fuera del componente GoogleMap . ¿Alguna idea sobre cómo debo abordar este problema? ¡Gracias!
De acuerdo, no sé exactamente cómo están estructurados sus componentes, pero intente agregar el estado activeMarker dentro del componente donde se encuentran sus marcadores. A continuación, transmita setActiveMarker como accesorio al componente Business . Y dentro del componente Business , transmita la setActiveMarker hike.coordinates.longitude hike.coordinates.latitude a los componentes BusinessCard . Dentro BusinessCard , agregue onHover={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}
Algo como esto...
Componente donde se ubican los Marcadores
const [activeMarker, setActiveMarker] = useState(null) return ( <> <GoogleMap> {hikes.map(hike => ( <Marker position={{lat: hike.coordinates.latitude, lng: hike.coordinates.longitude}} icon = {{ url:"https://static.thenounproject.com/png/29961-200.png", scaledSize : new google.maps.Size(50,50) }} animation={ (hike.coordinates.latitude === activeMarker.lat && hike.coordinates.longitude === activeMarker.lng) ? google.maps.Animation.BOUNCE : undefined } /> ))} </GoogleMap> <Business setActiveMarker={setActiveMarker} /> </> )componente comercial
return( <div className="businessesColumn"> {hikes.map(hike => ( <BusinessCard latitude={hike.coordinates.latitude} longitude={hike.coordinates.longitude} setActiveMarker={props.setActiveMarker} /> ))} </div> )Componente BusinessCard
return ( <div className="business-card" onMouseEnter={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })} > {/* Whatever */} </div> )