如何使 Google 地图标记在 JavaScript 中再次反弹

Question

我希望我的 Google 地图标记保持弹跳。当它被拖动时，我希望它停止弹跳。当它停止被拖动时，我希望它再次开始弹跳。

代码如下：

    var marker = new google.maps.Marker({
        position: { lat: 0, lng: 0 },
        map: map,
        draggable: true,
        animation: google.maps.Animation.BOUNCE
    });

    marker.addListener('dragend', function () {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    });

    marker.addListener('dragstart', function () {
        marker.setAnimation(null);
    });

问题是，当我停止拖动标记时，它会执行一次弹跳动画（大约一秒钟），然后标记不会像拖动前那样继续上下弹跳。

当我点击一个标记然后再次点击它时，我在另一个功能中遇到了同样的问题（第二次点击后它反弹一次并且不会继续反弹）。

它只会弹跳一次然后停止，但我希望它在 dragend 上继续上下弹跳（就像它在被拖动之前所做的那样），而不是弹跳一次就停止。

为什么它不继续播放动画以及如何修复它有什么想法吗？

Answer 1

似乎是 API 中的错误。可能值得在指向此问题的 issue tracker 中打开一个问题。

您可以通过使用 setTimeout 重新启动动画来解决此问题：

marker.addListener('dragend', function() {
  marker.setAnimation(google.maps.Animation.BOUNCE);
  setTimeout(function() {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }, 1000);
});

好像有一段时间之前的动画是活跃的，但是结束的时候，只会反弹一次。
animation_changed 事件似乎也没有帮助（上一个动画停止时似乎没有触发）。

proof of concept fiddle

代码片段：

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

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.BOUNCE,
    position: {
      lat: 59.327,
      lng: 18.067
    }
  });
  marker.addListener('dragend', function() {
    marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout(function() {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }, 1000);
  });

  marker.addListener('dragstart', function() {
    marker.setAnimation(null);
  });

  marker.addListener('animation_changed', function() {
    console.log(marker.getAnimation());
  })
}

/* 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;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

如何使 Google 地图标记在 JavaScript 中再次反弹

How to make Google Maps marker bounce again in JavaScript

javascript

google-maps

event-listener

event-handling

google-maps-markers