谷歌地图标记 DROP 动画不一致答案

【问题标题】：Google maps marker DROP animation is inconsistent谷歌地图标记 DROP 动画不一致
【发布时间】：2021-05-17 23:48:47
【问题描述】：

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

the official documenation 上的 JSFiddle 有一个切换弹跳动画的演示。

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

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

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

上述方法不起作用。

【问题讨论】：

标签： javascript typescript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

要让标记再次掉落，请将map 属性设置为null（将其从地图中移除），然后再次设置动画，并将标记添加到地图中。

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

proof of concept fiddle

代码 sn-p：

// 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>

【讨论】：