Javascript 谷歌地图缩放平移缩放动画

我想知道如何使用谷歌地图API实现动画的平滑缩放

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

如何执行此操作？

您需要设置“连续缩放”参数的方法来执行缩放，以及平滑平移到新中心点的方法

您可以收听地图对象上的和事件，将

zoomOut

、

panTo

和

zoomIn

方法链接在一起

编辑：

因此，在为这个问题实现一个示例的过程中，我发现

ZoomIn

和

ZoomOut

上的

doContinuousZoom

参数（或者仅仅是地图上的

EnableContinuousZoom

）并没有像预期的那样工作。如果平铺在缓存中（这是一个重要的问题，如果平铺没有缓存，则实际上不可能获得所需的平滑动画），则缩小时效果正常然后，它在平铺上做了一些很好的缩放，以模拟平滑的缩放动画，并在每个缩放步骤上引入约500毫秒的延迟，以便您可以异步执行（与

panTo

不同，您将在我的示例中看到，我使用setTimeout调用async）

不幸的是，对于

zoomIn

方法，情况并非如此，它只是跳转到目标缩放级别，而没有每个缩放级别的缩放动画。我还没有明确地设置GoogleMaps代码的版本，所以这可能是在以后的版本中修复的。不管怎么说，这里有一个主要是javascript跳转，而不是谷歌地图API：

因为这种方法似乎有点不可靠，所以我认为显式地对setZoom进行异步处理（与平移操作相同）更有意义

编辑2：

因此，我现在显式地进行异步缩放（使用

setTimeout

每次进行一次缩放）。我还必须在每次缩放时触发事件，以便正确地链接事件。似乎zoomEnd和panEnd事件正在同步调用

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

以下是我的方法

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

---

对于缩放，这一个非常适合我：

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

---

我知道我必须做这样的事情，我想知道的是我到底该怎么做？谢谢，期待着；）我已经更新了我的示例，使用setTimout，现在看起来更平滑了（至少在缩小上）。那么你能实现平滑的缩放吗？有人在Google Maps JavaScript API的v3中找到了这个吗？这是一个非常急促的解决方案。我不推荐。这周我做了，但还不够体面。即使是平移也太快和线性了，所以我写了s脚本，减慢了速度，使其减速成指数级。我会使用RedBlueThing的解决方案。在这种方法中，指数法肯定要好得多，但仍然不够好。我觉得它需要同时进行平移和缩放，才能看起来非常平滑……我不知道这有多不好。需要太多的时间，加上任何动画或运动都应该在600毫秒以下，否则会浪费用户的时间！

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