7

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

我正在尝试在这样的侦听器上使用 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 秒视频：

===> http://youtu.be/Hcy8823nNQU

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

4

1 回答 1

13

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

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。

编辑：

似乎使用标记 asdraggable: false会破坏功能，所以如果您希望动画仍然可以工作，您还需要添加optimized: false，更新我的小提琴以包含这些。我还看到如果标记动画切换进出太快会出现错误，在我们开始弹跳动画之前添加了小计时器来指示，似乎解决了这个问题。

于 2013-05-05T13:26:10.150 回答