单击列表项时动画标记 - google-maps-react答案

【问题标题】：Animate marker when click on a list item - google-maps-react单击列表项时动画标记 - google-maps-react
【发布时间】：2018-07-03 17:46:49
【问题描述】：

我已经用google-maps-react 建立了一个项目。

我有这个组件结构

<App />
--- <FilterLocations />
------ <LocationsList />
--- <GoogleMaps />
------ <Marker />

我点击<LocationList />中的一个项目，我希望它在<GoogleMaps />组件中做出相应的标记反弹（由包提供的<Marker />组件表示）。

所以在<GoogleMaps /> 组件中我有这个sn-p：

{locations.map(location =>
   <Marker
      key={location.key}
      title={location.title}
      name={location.name}
      position={location.position}
      onClick={this.onMarkerClick}
      animation={(currentMarker === location.title)
         && this.props.google.maps.Animation.BOUNCE}
   />
)}

currentMarker 处于<App /> 状态，当我们点击<LocationsList /> 中的一个项目时，它会更新，它是一个等于location.title 的字符串。

所以，当我使用 ReactDevTools 时，当比较为真时，我看到动画道具正确设置为 1，但它仍然没有反弹。

有什么想法吗？

这是GitHub上的整个项目。

谢谢！

【问题讨论】：

标签： reactjs maps google-maps-react

【解决方案1】：

您似乎决定删除该项目，以防您仍然对答案感到好奇或其他人可能需要它 - 在我的项目中这是有效的：

我使用纪录片here 中提供的功能设置我的项目。因此，在使用提供的 activeMarker 时，我设法通过在我的组件中添加这一行来让我的标记在点击时反弹：

 {filterLocations.map((item) => {
    return (    
    <Marker
      animation={activeMarker ? (item.name === activeMarker.title ? '1' : '0') : '0'} 
    />
 )
})}

是的，就是这样，不需要额外的功能。（假设您已经让标记响应列表项上的 .click()。）

【讨论】：