谷歌地图zoomOut-Pan-zoomIn动画

Question

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

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

我怎样才能做到这一点？

Answer 1

您需要zoomOut使用连续缩放参数设置的panTo方法来执行缩放,并且需要使用方法平滑地平移到新的中心点.

你可以听zoomEnd和moveEnd地图对象上的事件链接在一起的zoomOut,panTo和zoomIn方法.

编辑:

因此,在执行这个问题的样本的过程中,我发现doContinuousZoomPARAM上ZoomIn和ZoomOut(或只是EnableContinuousZoom在地图上)并没有如预期那么回事.当缩小时,它可以正常工作,如果磁贴在缓存中(这是一个重要的点,如果磁贴没有缓存,那么它实际上不可能得到你想要的平滑动画)然后它做了一些很好的缩放用于模拟平滑缩放动画的图块,并在每个缩放步骤中引入约500毫秒的延迟,以便您可以异步执行(不像panTo,在我的示例中我将使用setTimeout来调用异步).

不幸的是,对于该zoomIn方法来说情况并非如此,该方法只是在没有每个缩放级别的缩放动画的情况下跳转到目标缩放级别.我没有尝试明确设置谷歌地图代码的版本,所以这可能是在以后的版本中修复的东西.无论如何,这里的示例代码主要是javascript跳跃,而不是谷歌地图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