react-google-maps 标记动画答案

【问题标题】：react-google-maps marker animationreact-google-maps 标记动画
【发布时间】：2018-02-03 20:10:13
【问题描述】：

有没有办法从地图外的另一个组件为react-google-maps 上的标记设置动画？我的具体要求是能够单击列表中的项目，使地图上的标记动画两秒钟。最好不必重新渲染标记。

【问题讨论】：

你有没有想过这个问题？我正在查看文档，animation 属性说它的类型是 any，我不确定那是什么类型的属性值。

标签： google-maps reactjs

【解决方案1】：

animation prop 应该是 1 或 2 中的一个数字。

1 等于window.google.maps.Animation.BOUNCE。

2 等于window.google.maps.Animation.DROP。

所以要创建一个带有动画的标记，它应该如下：

<Marker
position={position}
animation={window.google.maps.Animation.DROP}
/>

或

<Marker
position={position}
animation={2}
/>

如果您想移除 BOUNCE 动画，请使用 animation={null}。

您可以使用标记state={ animation : 2 }（DROP 动画）启动您的应用，然后使用setState({ animation : 1 })（BOUNCE 动画）更改为state={ animation: 1 }，然后您可以使用setState({ animation: null }) 停止BOUNCE 动画

查看Marker animation example on google maps docs

【讨论】：