谷歌地图zoomOut-Pan-zoomIn动画

Question

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

我有2分，一分，中国，法国一分。当我放大中国时，点击按钮法国。我想让它逐渐缩小平滑，一次缩放级别。当它缩小时，它应该平移到新位置，然后放大当前一个缩放级别的新位置。

我该怎么做？

Answer 1

您需要 zoomOut 将连续缩放参数设置为进行缩放的方法和 panTo 方法，可以平滑地平移到新的中心点。

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

编辑：

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

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

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

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

EDIT2：

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

在地图上设置enableContinuousZoom似乎不起作用，所以我想调用zoomOut，使用param zoomIn是使其工作的唯一方法。

Answer 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

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

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