谷歌地图上React标记动画

Question

有没有一种方法可以从地图之外的另一个组件上对react-google-maps的标记进行动画处理？ 我的具体要求是能够单击列表中的项目，使地图上的标记动画处理两秒钟。 最好不必重新渲染标记。

- Vijay

---

你最终解决了这个问题吗？我正在查看文档，发现animation属性的类型是any，但我不确定它应该赋什么样的属性值。 - rohan-patel

Answer 1

animation 属性应该是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动画。

请参阅此谷歌地图文档中的标记动画示例

- Ahmed Mokhtar