如何让谷歌地图标记在 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

代码 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.

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>