Question

当我鼠标悬停在标记上时，我希望有弹跳效果，并在mouseleave时停止动画。

我正试图在这样的监听器上使用mouseover和mouseout事件：

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

google.maps.event.addListener(marker, 'mouseout', function() {
  this.setAnimation(null);
});

但这看起来很奇怪。我无法用言语解释错误的行为 - 请看我录制的15秒视频：

===＆GT; http://youtu.be/Hcy8823nNQU

我需要的可能是mouseleave而不是mouseout，但该事件不是由他们的API提供的。

Answer 1

关键是仅在未设置动画时设置动画，如：

google.maps.event.addListener(marker, 'mouseover', function() {
    if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {

        /* 
        Because of the google maps bug of moving cursor several times over and out of marker
        causes bounce animation to break - we use small timer before triggering the bounce animation
        */

        clearTimeout(bounceTimer);

        var that = this;

        bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        500);

    }
});

google.maps.event.addListener(marker, 'mouseout', function() {

     if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

     // If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);

});

我为您创建了 JS fiddle 。

已编辑：

似乎使用标记draggable: false会破坏功能，所以如果你想让动画仍然有用，你还需要添加optimized: false，更新我的小提琴以包含这些。此外，我看到如果标记动画切换进出太快，有一个错误，在我们开始反弹动画之前添加小计时器以指示，似乎解决了问题。

用于Google地图标记的鼠标悬停和鼠标悬停监听器

1 个答案: