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 example，就会看到他们设置draggable: true。

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

1 个答案: