Question

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

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，然后再设置，它就会播放一次。只有在第一次鼠标悬停时才会持续弹跳。奇怪..

Answer 1

不是将动画设置为null，而是将其设置为-1。动画常量只是整数。我在我的vuejs应用程序中挣扎了大约一个小时才解决这个问题：/

谷歌地图API v3：标记并不总是持续反弹

1 个答案: