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

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秒视频:

===> 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小提琴.

编辑:

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