谷歌地图-标记在鼠标悬停前闪烁

Google maps - markers flash before bounce onmouseover

本文关键字：悬停 闪烁 鼠标 谷歌地图      更新时间：2023-09-26

我已经构建了一个谷歌地图，其中标记在一些外部链接的滚动时会反弹。我创建了这个短函数来反弹标记：

function makeBounce(marker) {
        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function(){ marker.setAnimation(null); }, 750);
}

我用这个来执行它：

<a onmouseover="javascript:map.panToBounds(bounds);makeBounce(markersArray[1]);"  href="javascript:google.maps.event.trigger(markersArray[1], 'click');">Marker name</a>

我注意到的是，就在标记反弹之前，它们会闪烁。这几乎是不可察觉的，但这已经足够让人讨厌了（尤其是因为谷歌自己的博客文章推出了弹跳标记，非常流畅：http://googlegeodevelopers.blogspot.com/2010/12/map-markers-they-move.html)。

我在这里创建了一个JS Fiddle来演示它：http://jsfiddle.net/RmDuz/（滚动蓝色链接查看问题）。

我在Firefox9和Chrome 16中都尝试过，但问题都存在。

有什么想法吗？

问题似乎是，标记图像在反弹之前是动态（重新）加载的，因为在Chrome中，我在标记重新出现然后反弹之前看到了"无图像"框。

编辑：我已经修改了代码，以使用映射API侦听器而不是Javascript函数，希望API代码可能更高效，但没有乐趣：（

    google.maps.event.addListener(marker, 'dblclick', (function(marker, i) {
        return function() {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(function(){ marker.setAnimation(null); }, 750);
        }
    })(marker, i));

我使用dblclick是因为我不想要mouseover，这意味着动画是在标记翻转时触发的。我只想在外部链接滚动时触发动画：

<a onmouseover="javascript:google.maps.event.trigger(markersArray[1], 'dblclick');">Link name</a>

我更新了JS Fiddle以反映这一点：http://jsfiddle.net/RmDuz/1/

我也遇到了这个问题。事实证明，设置MarkerOptions optimized: false或draggable: true将在标记设置动画之前停止其闪烁。

非优化标记：

// Create a non-optimized marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(39.107182, -123.501868),
    map: map,
    optimized: false // stops the marker from flashing
});
// Bounce once
marker.setAnimation(google.maps.Animation.BOUNCE);
marker.setAnimation(null);

可拖动标记：

// Create a draggable marker
var draggableMarker = new google.maps.Marker({
    position: new google.maps.LatLng(39.107182, -123.501868),
    map: map,
    draggable: true // stops the marker from flashing
});
// Bounce once
draggableMarker.setAnimation(google.maps.Animation.BOUNCE);
draggableMarker.setAnimation(null);

如果你看一下谷歌的例子，你会发现他们设置了draggable: true。

相关文章：