谷歌地图API v3:Markers don't总是不停地弹跳

Google maps API v3: Markers don't always continuously bounce

本文关键字：v3 API Markers don 谷歌地图      更新时间：2024-01-29

我在谷歌地图标记的反弹动画方面遇到了一些问题。基本上，我在地图右侧的一列中有一个主题列表。每个主题下面都列出了与之相连的标记的名称，并带有复选框以直观地显示/隐藏标记。我想让相应的标记在悬停在其链接的复选框上时连续反弹，并在用户停止悬停在复选框上后立即停止反弹。我现在有以下代码：

HTML:

<input type='"checkbox'" onmouseenter='"highlightPoint( " + (amountOfPoints - 1) + " )'" onmouseleave='"removePointHighlighting( " + (amountOfPoints - 1) + " )'" /> "

Javascript：

function highlightPoint( pointIndex ) {
        window["point" + (pointIndex+1)].setAnimation(google.maps.Animation.BOUNCE);
    }
    function removePointHighlighting( pointIndex ) {
        console.log( "remove animation" );
        window["point" + (pointIndex+1)].setAnimation( null );
    }

除了一个小问题外，这段代码几乎可以正常工作。有时动画在悬停时连续播放，但有时在离开悬停状态并再次悬停后，反弹动画只播放一次，然后停止。发生这种情况的时间或原因似乎相当随机。动画只播放一次之后，在刷新页面之前，它将不再连续播放。我猜这与动画背后的一些计时器有关？我发现以下代码只用于播放一次弹跳动画：

setTimeout(function(){ marker.setAnimation(null); }, 750);

有没有办法在mouseleave上"重置"这些计时器，或者有没有其他原因导致动画出错？对于我正在制作的应用程序来说，这是一个相对不重要的功能，但我仍然想知道这里的问题是什么。。

编辑：这似乎是特定于浏览器的问题。在Safari和Firefox中进行测试时，不会出现任何弹跳问题。奇怪的是，指定的问题只出现在Chrome中。通常，一旦动画设置为null，然后再次设置，它将只播放一次。只有在第一次鼠标悬停时，弹跳才会连续播放。奇怪的

不要将动画设置为null，而是将其设置为-1。动画常量只是int。我在我的vuejs应用程序中解决了这个问题大约一个小时，然后才弄清楚：/

相关文章：