如何让谷歌地图标记在JavaScript中再次反弹

Question

我希望我的谷歌地图标记继续弹跳。当它被拖动时，我希望它停止弹跳。当它停止被拖动时，我希望它再次开始弹跳。

这是代码：

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 中的一个错误。 可能值得在指向此问题的问题跟踪器中打开一个问题。

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

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

• 似乎有一段时间，上一个动画处于活动状态，但结束，它只会反弹一次。

• animation_changed事件似乎也没有帮助(在上一个动画停止时似乎不会触发(。

概念验证小提琴

代码片段：

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