谷歌地图缩小-平移-放大动画

Question

我想知道如何使用Google Maps API实现平滑的缩放动画。

我有两个点，一个在中国，另一个在法国。当我正在查看中国并单击法国按钮时，我希望它逐渐平滑地缩小一个缩放级别。当缩小时，它应该移动到新位置，然后再以一个缩放级别为单位放大到新位置。

我该如何做到这一点？

- Sindre Sorhus

Answer 1

您需要使用带有连续缩放参数的 zoomOut 方法来进行缩放，使用 panTo 方法来实现平滑移动到新的中心点。

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

编辑：

因此，在实现此问题的示例过程中，我发现 ZoomIn 和 ZoomOut 上的 doContinuousZoom 参数（或者地图上的 EnableContinuousZoom）并没有像预期那样完全起作用。当缩小时，如果瓷砖已经被缓存（这是一个重要的点，如果瓷砖没有被缓存，则不可能获得您所期望的平滑动画效果），则它会对瓷砖进行一些不错的缩放，以模拟平滑的缩放动画，并在每个缩放步骤上引入约500毫秒的延迟，以便您可以异步执行它（与 panTo 不同，在我的示例中，我使用 setTimeout 调用异步方法）。

不幸的是，对于zoomIn方法来说情况并非如此，它只会直接跳到目标缩放级别而没有每个缩放级别的缩放动画。 我尚未尝试显式设置google地图代码的版本，因此这可能是在后续版本中修复的问题。 无论如何，这里是示例代码，它主要只是一些JavaScript技巧，而不是使用Google Maps API：

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

因为这种方法似乎有点不可靠，所以我认为明确地进行setZoom的异步处理会更有意义（与平移操作一样）。

编辑2：

现在我明确地进行异步缩放（使用 setTimeout 每次单独缩放）。 我还必须在每次缩放发生时触发事件，以使我的事件链正确。 看起来zoomEnd和panEnd事件是同步调用的。

在地图上设置enableContinuousZoom似乎不起作用，所以我想调用带参数的zoomOut、zoomIn是唯一的方法来实现这个功能。

- RedBlueThing

---

我知道我必须做类似的事情，我想知道的是我应该如何确切地去做？ - Sindre Sorhus

谢谢，期待着它的到来 ;) - Sindre Sorhus

我已经更新了我的示例，使用了setTimout，现在看起来更加流畅了（至少在缩小时是这样的）。 - RedBlueThing

所以，你能让平滑缩放的效果实现了吗？ - RedBlueThing

有人能为Google Maps JavaScript API的v3找到这个吗？ - Drew Noakes

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

- Stubbies

---

这是一个非常不流畅的解决方案。我不建议使用它。我本周尝试了一下，但效果并不好。即使是平移也太快且线性，所以我编写了一个脚本来减缓速度并使其在减速时呈指数级增长。我会选择RedBlueThing的解决方案。 - Adrian Bartholomew

指数函数在这种方法中确实更好，但仍然不够好。我觉得它需要同时进行平移和缩放才能看起来真正流畅...但我不知道该怎么做。 - Arch1tect

这不太好。花费的时间太长了，而且任何动画或移动都应该在600毫秒以内，否则你会浪费用户的时间！ - RTarson

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

- tetris11

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

- Igor Mukhin