如何将"outside"事件侦听器添加到谷歌地图中的标记(react-google-maps/api)

Question

我在state中存储了一个远足列表，并将这些远足的位置渲染为Google Map组件上的标记，如下所示:

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

我还在其自己的BusinessCard组件中显示远足列表及其其他详细信息，如下所示:

export const Businesses = (props)=>{
const {hikes, addToTrip} = props
return(<>
<div className="businessesColumn">
{hikes.map(hike=>(
<BusinessCard.../>  
))}

当我将鼠标悬停在每个BusinessCard组件上时，我希望相应的标记动画"弹跳"。我试图操纵google.maps.event.addListener，但我认为我做错了。我不确定它是否可以检测GoogleMap组件之外的事件?我该如何处理这个问题，有什么想法吗?

Answer 1

好吧，所以我不知道你的组件是如何结构的，但试着在你的标记所在的组件内添加状态activeMarker。然后将setActiveMarker作为道具传递给Business组件。在Business组件内部，将hike.coordinates.latitude、hike.coordinates.longitude和setActiveMarker作为道具传递给BusinessCard组件。在BusinessCard中添加onHover={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}

像这样的

标记所在的组件

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

业务组件

return(
<div className="businessesColumn">
{hikes.map(hike => (
<BusinessCard
latitude={hike.coordinates.latitude}
longitude={hike.coordinates.longitude}
setActiveMarker={props.setActiveMarker}
/>
))}
</div>
)

<<p>名片组件/strong>

return (
<div
className="business-card"
onMouseEnter={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}
>
{/* Whatever */}
</div>
)