javascript - 如何平滑放大谷歌地图中的标记？

Question

我希望能够顺畅地放大 Google map 中的标记。如果只是将缩放设置为双击，则 map 会突然处于该缩放级别，没有任何平滑过渡。

仅比当前级别进一步放大一个级别，Google map 显示了一个很好的平滑过渡。所以必须可以平滑地放大超过一级，但是如何呢？

Answer 1

正好最近想达到同样的效果，找到了解决方案，自己做了a post关于。基本上，仅仅为每个转换设置超时是不够的，因为如果谷歌的缩放效果还没有完成，或者已经完成很长时间，它很容易导致“开始-停止”式的缩放。

正如 Martin 提到的，这样做有一些缺点，我不会重复。最终是否使用它是您的选择，很大程度上取决于用户的 CPU 能力和/或浏览器。不过，这是一个不错的效果，如果使用得当，肯定会给一些人留下深刻印象。

我的解决方案如下:

// example marker:
var marker = new google.maps.Marker({
    map: map, 
    position: new google.maps.LatLng(-20.3,30.3)
});


// add the double-click event listener
google.maps.event.addListener(marker, 'dblclick', function(event){
    map = marker.getMap();    
    map.setCenter(overlay.getPosition()); // set map center to marker position
    smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
});


// the smooth zoom function
function smoothZoom (map, max, cnt) {
    if (cnt >= max) {
        return;
    }
    else {
        z = google.maps.event.addListener(map, 'zoom_changed', function(event){
            google.maps.event.removeListener(z);
            smoothZoom(map, max, cnt + 1);
        });
        setTimeout(function(){map.setZoom(cnt)}, 80); // 80ms is what I found to work well on my system -- it might not work well on all systems
    }
}  

基本上它归结为将缩放级别调整一级，监听 zoom_changed 事件，等待 80 毫秒再将缩放级别调整一级，等等。这样做的好处是zoom_changed 事件似乎是在 Google map 提供的平滑过渡之后调用的，但是在加载实际图像之前调用的，因此它不会过多地浪费带宽。 p>

超时中的 80 毫秒也是我想出的一个神奇数字 - 建议您进行更彻底的测试并查看在不同系统和浏览器上的工作原理，并可能根据您的发现稍微更改算法或针对不同的系统。

可能也没有必要每次都添加和删除监听器，但如果您愿意，可以自己进行小的改进。