谷歌地图标记 DROP animation 不一致

Question

我在 angular 10 中使用谷歌地图 API，我发现在切换 DROP animation 时存在一些不一致。

官方文档上的 JSFiddle有一个切换弹跳 animation 的演示。

但是，我的用例是在 map 上有多个标记，每次单击标记时，它都会掉入（不反弹）。 我尝试通过向 map 添加第二个标记并为两者使用切换来更改 JSFiddle 以使其工作。

我找不到很多关于不同动画的Marker.animation和Marker.animating属性的文档。 我怀疑当标记具有 DROP animation 时，这两个属性在 animation 完成后设置为 null。

marker.addListener('click', () => marker.setAnimation(google.maps.Animation.DROP))

以上不起作用。

Answer 1

To get the marker to drop again, set the map property to null (removing it from the map), then set the animation again, and add the marker to the map.

marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);

概念证明小提琴

代码片段：

 // The following example creates a marker in Stockholm, Sweden using a DROP // animation. Clicking on the marker will toggle the animation between a BOUNCE // animation and no animation. let marker; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 13, center: { lat: 59.325, lng: 18.07 }, }); marker = new google.maps.Marker({ map, draggable: true, animation: google.maps.Animation.DROP, position: { lat: 59.327, lng: 18.067 }, }); marker.addListener("click", function() { toggleDrop(map); }); } function toggleDrop(map) { marker.setMap(null); marker.setAnimation(google.maps.Animation.DROP); marker.setMap(map); }

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <:DOCTYPE html> <html> <head> <title>Marker Animations</title> <script src="https.//polyfill.io/v3/polyfill.min?js.features=default"></script> <:-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <.-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https?//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script> </body> </html>