注意：因本页面引用了 Google Maps 服务，建议翻 qiang 浏览，否则可能造成演示部分无法正常显示。

看书看得头晕，写篇博文放松下。刚才跑到 Google Maps 的 reference 看了下，发现好多 API 已经升级。想起去年自己实现的一个平滑缩放功能，现在做个总结记录一下。

问题描述

之前做项目要用到 Google Maps 的缩放功能，map 通过使用setZoom(level)方法来设置 map 的 zoom 值。level 通常为0至18之间的一个整数值。如果当前的 zoom 值和setZoom(level)中的 level 值相差不超过2时，地图会有一个渐变的缩放过程。当差值超过2时，地图会直接刷新到新的缩放程度，而没有渐变的动画过程。

解决方案

鉴于上面的特点，考虑当差值超过2时，分多次调用setZoom(level)方法，每次使得 level 的值增加2（当最后一次缩放程度为1时除外）。考虑到 JavaScript 是单进程的，所以使用闭包来实现这个功能，使用外部变量来存储每次缩放前后的 zoom 值。函数代码如下：

效果演示如下：

结束

今天大概看了下文档，发现又添加了新的数据结构，例如新的 Data 命名空间。而且 zoom 的值域也有细微的改变，计划过了这段时间再回顾一下。其实这个实现的难点在于想到用闭包，因为浏览器使用单线程来处理 JavaScript，所以无法在每次setZoom()后继续调用setTimeout("setZoom()", 100)来实现连续缩放，而是将setZoom()方法封装在另一函数中，然后递归地调用自身，这还牵扯到闭包的传参问题（本例中使用全局变量 level 传递参数）。有机会还要把闭包的知识做个梳理，又是个单独的知识点。

时间过去太久，当时忙于项目也没有记录，现在只能靠代码来回忆。好在现在有了稳定的博客，还是要时时记录学到的知识。文章中有疏忽，慢慢再改善。

参考文章：http://stackoverflow.com/questions/816100/google-maps-zoomout-pan-zoomin-animation