Google Maps zoom Out-Pan-zoomIn 动画答案

【问题标题】：Google Maps zoomOut-Pan-zoomIn animationGoogle Maps zoom Out-Pan-zoomIn 动画
【发布时间】：2009-05-03 02:04:08
【问题描述】：

我想知道如何使用 Google Maps API 平滑地放大动画。

我有 2 分，一分在中国，一分在法国。当我放大中国时，点击法国按钮。我希望它逐渐平滑缩小，一次缩放一个级别。当它被缩小时，它应该平移到新位置，然后在新位置上同时放大一个缩放级别。

我该怎么做？

【问题讨论】：

标签： javascript google-maps settimeout

【解决方案1】：

您需要设置连续缩放参数的zoomOut 方法进行缩放，并使用panTo 方法平滑平移到新的中心点。

您可以收听地图对象上的zoomEnd 和moveEnd 事件，将您的zoomOut、panTo 和zoomIn 方法链接在一起。

编辑：

因此，在针对此问题实施示例的过程中，我发现ZoomIn 和ZoomOut（或地图上的EnableContinuousZoom）上的doContinuousZoom 参数并没有按预期工作。缩小时它可以正常工作，如果图块在缓存中（这是重要的一点，如果图块没有被缓存，那么它就不可能获得你想要的平滑动画）然后它会做一些很好的缩放用于模拟平滑缩放动画的图块并在每个缩放步骤中引入约 500 毫秒的延迟，因此您可以异步执行（与 panTo 不同，您将在我的示例中看到我使用 setTimeout 来调用异步）。

不幸的是，zoomIn 方法并非如此，它只是跳转到目标缩放级别，而没有每个缩放级别的缩放动画。我没有尝试明确设置谷歌地图代码的版本，所以这可能是在以后的版本中修复的问题。无论如何，这里是sample code，它主要是 javascript 箍跳，而不是 Google Maps API：

http://www.cannonade.net/geo.php?test=geo2

因为这种方法似乎有点不可靠，我认为明确地为 setZoom 进行异步处理会更有意义（与平移的东西相同）。

EDIT2：

所以我现在明确地进行异步缩放（使用 setTimeout 一次进行一次缩放）。我还必须在每次缩放发生时触发事件，以便我的事件链正确。似乎 zoomEnd 和 panEnd 事件正在同步调用。

在地图上设置 enableContinuousZoom 似乎不起作用，所以我想调用 zoomOut、zoomIn 和参数是让它工作的唯一方法。

【讨论】：

我知道我必须做这样的事情，我想知道我到底该怎么做？
谢谢，期待；）
我已经更新了我的示例以使用 setTimout 并且现在看起来更加流畅（至少在缩小时）。
那么您能否实现平滑缩放？
任何人都找到了 Google Maps JavaScript API v3 的这个？

【解决方案2】：

这是我的方法。

var point = markers[id].getPosition(); // Get marker position
map.setZoom(9); // Back to default zoom
map.panTo(point); // Pan map to that position
setTimeout("map.setZoom(14)",1000); // Zoom in after 1 sec

【讨论】：

这是一个非常生涩的解决方案。我不会推荐它。我这周做了，但还不够体面。即使是平底锅也太快而且太线性，所以我写了一个脚本来减慢它的速度，让它以指数级的速度减速。我会选择 RedBlueThing 的解决方案。
指数在这种方法中肯定要好得多，但仍然不够好。我觉得它需要同时进行平移和缩放才能看起来非常流畅......我不知道如何
这不好。花费太多时间，加上任何动画或动作都应该在 600 毫秒以下，否则你会浪费用户的时间！

【解决方案3】：

var zoomFluid, zoomCoords;   //shared variables

function plotMarker(pos, name){
    var marker = new google.maps.Marker({
        map: map,
        title:name,
        animation: google.maps.Animation.DROP,
        position: pos
    });
    google.maps.event.addListener(marker, 'click', function(){
            zoomCoords = marker.getPosition();     //Updates shared position var
            zoomFluid = map.getZoom();            //Updates shared zoom var;
            map.panTo(zoomCoords);       //initial pan
            zoomTo();                   //recursive call
    });

}

//  increases zoomFluid value at 1/2  second intervals
function zoomTo(){
    //console.log(zoomFluid);
    if(zoomFluid==10) return 0;
    else {
         zoomFluid ++;
         map.setZoom(zoomFluid);
         setTimeout("zoomTo()", 500);
    }
}

【讨论】：

【解决方案4】：

对于缩放，这对我很有效：

function animateMapZoomTo(map, targetZoom) {
    var currentZoom = arguments[2] || map.getZoom();
    if (currentZoom != targetZoom) {
        google.maps.event.addListenerOnce(map, 'zoom_changed', function (event) {
            animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
        });
        setTimeout(function(){ map.setZoom(currentZoom) }, 80);
    }
}

【讨论】：