谷歌地图zoomOut-Pan-zoomIn动画

Question

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

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

我该怎么做？

Answer 1

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

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

编辑：

所以在执行这个问题的样本的过程中，我发现doContinuousZoom PARAM上ZoomIn和ZoomOut（或只是EnableContinuousZoom在地图上）并没有如预期那么回事。当缩小时，如果图块在缓存中（这是一个重要的观点，如果图块没有被缓存，那么它实际上不可能获得您之后的平滑动画）时，它可以正常工作，瓷砖模拟平滑的缩放动画，并在每个缩放步骤上引入〜500 ms的延迟，因此您可以异步执行此操作（不像panTo，您将在我的示例中看到我使用setTimeout调用异步）。

不幸的是zoomIn方法也是这样，它只是跳到目标缩放级别，没有每个缩放级别的缩放动画。我没有尝试明确设置谷歌地图代码的版本，所以这可能是在更高版本中修复的问题。总之，这里是sample code这是大多只是JavaScript的箍跳跃和与其说与谷歌地图API：

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

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

EDIT2：

所以我做异步现在明确地缩放（使用setTimeout一次与一个单一的变焦）。我还必须在每次缩放发生时触发事件，以便我的事件正确链接。看起来像是同时调用了zoomEnd和panEnd事件。

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

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