react-google-maps 标记动画

Question

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

Answer 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 动画）启动您的应用程序，然后更改为state={ animation: 1 }using setState({ animation : 1 })（BOUNCE 动画），您可以使用以下命令停止 BOUNCE 动画setState({ animation: null })

在谷歌地图文档上查看此标记动画示例