谷歌地图标记的鼠标滑过和鼠标聆听者

当鼠标悬停在标记上时，我想要有弹跳效果，并在mouseleave时停止动画。谷歌地图标记的鼠标滑过和鼠标聆听者

我试图使用鼠标悬停和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

我需要的可能是鼠标离开，而不是鼠标移开，但该事件不由他们的API提供。

来源

2013-05-05 Stefan Huska

，关键是要设置动画只有当没有设置它已经作为：

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，更新了我的小提琴包含这些。此外，我发现如果标记动画切换太快，在开始弹跳动画之前添加了一个小计时器，可能会解决问题。

来源

2013-05-05 13:26:10

感谢您的快速回复。对我来说这是行不通的，我在其他代码的某个地方肯定有问题。例如，当我从JS小提琴中移除条件时，它仍然可以工作。 – 2013-05-05 13:54:25

哦，我明白了。我需要添加“draggable：true”，然后才能正常工作！看，这是你的小提琴，但我将可拖动设置为false，我们看到了问题 - http://jsfiddle.net/Mas4D/1/但是为什么？我不希望标记是可拖动的，嗯。 – 2013-05-05 14:00:30

我在一秒内回答，我似乎发现了一些谷歌地图的一些错误，以及如何克服它们。 :) – 2013-05-05 14:41:58

谷歌地图标记的鼠标滑过和鼠标聆听者

回答

相关问题