谷歌地图 - 标记在反弹之前闪现

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>

我注意到的是,在标记反弹之前,它们会闪烁.这几乎是不可察觉的,但它真的很烦人(特别是因为谷歌自己的博客发布弹跳标记很顺利:http://googlegeodevelopers.blogspot.com/2010/12/map-markers-they-move.html).

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

我已经在FF9和Chrome 16中尝试过了,两者都存在问题.

有什么想法吗？

问题似乎是标记图像是在弹跳之前动态(重新)加载的,因为在Chrome中,我会在标记再次出现之前看到"无图像"框然后反弹.

编辑:我已经改变了代码,以使用map 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因为我不希望鼠标悬停,这意味着当标记翻转时会触发动画.我只希望在外部链接滚动时触发动画:

<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示例,您会看到它们已设置draggable: true.