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

Question

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

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>

我注意到的是，就在标记弹起之前，它们会闪烁。这几乎是难以察觉的，但足以令人讨厌（尤其是因为 Google 自己的博文启动弹跳标记非常流畅：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/

Answer 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);

如果您查看Google example，您会发现他们设置了draggable: true。