javascript - 谷歌地图 zoomOut-Pan-zoomIn 动画

Question

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

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

我怎样才能做到这一点？

Answer 1

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

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

编辑:

因此，在针对这个问题实现示例的过程中，我发现 doContinuousZoom参数在 ZoomIn和 ZoomOut (或只是 EnableContinuousZoom 在 map 上)并没有按预期工作。缩小时它可以正常工作，如果切片在缓存中(这是重要的一点，如果切片没有被缓存，那么它就不可能获得你想要的平滑动画)然后它会做一些很好的缩放用于模拟平滑缩放动画的图 block ，并在每个缩放步骤中引入约 500 毫秒的延迟，因此您可以异步执行(与 panTo 不同，您将在我的示例中看到，我使用 setTimeout 来调用异步)。

不幸的是，zoomIn 并非如此。方法，它只是跳转到目标缩放级别，没有每个缩放级别的缩放动画。我没有尝试明确设置谷歌地图代码的版本，所以这可能是在以后的版本中修复的问题。无论如何，这里是sample code这主要是javascript箍跳，而不是谷歌地图API:

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

因为这种方法似乎有点不可靠，所以我认为显式地对 setZoom 进行异步处理会更有意义(与平移的东西相同)。

编辑2:

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

在 map 上设置 enableContinuousZoom 似乎不起作用，所以我猜想用参数调用 zoomOut、zoomIn 是让它工作的唯一方法。