Google Maps 标记的 Mouseover 和 Mouseout 侦听器

Question

我想在鼠标悬停在标记上时具有弹跳效果，并在鼠标离开时停止动画。

我正在尝试对这样的侦听器使用 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 没有提供该事件。

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 ，更新我的小提琴以包含这些。我还看到如果标记动画切换进出太快会出现错误，在我们开始弹跳动画之前添加了小计时器来指示，似乎解决了这个问题。