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

Question

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

{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 作为 prop 传递给 Business 组件。在 Business 组件内，将 hike.coordinates.latitude、hike.coordinates.longitude 和 setActiveMarker 作为 props 传递给 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>
)

名片组件

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

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

How to add "outside" event listener to Markers in Google Maps (react-google-maps/api)

javascript

reactjs

google-maps

react-google-maps