我有一個存盤在其中的遠足串列，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組件之外的事件？關于我應該如何解決這個問題的任何想法？謝謝！
uj5u.com熱心網友回復：
好的，所以我不確切知道您的組件是如何構成的，但請嘗試activeMarker在您的標記所在的組件內添加狀態。然后setActiveMarker作為道具傳遞給Business組件。在Business組件內部，傳遞 down hike.coordinates.latitude，hike.coordinates.longitude并setActiveMarker作為 props 傳遞給BusinessCard組件。里面BusinessCard，加onHover={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}
像這樣的東西...
Markers 所在的組件
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>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/469159.html
標籤：javascript 反应 谷歌地图 反应谷歌地图
上一篇：Kotlin為什么我不能在我的onCompleteListener中更改我的變數
下一篇：如何使用r中的緩沖區過濾點