使用 JavaScript 闭包实现 Google Maps 平滑缩放

注意:因本页面引用了 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 值。函数代码如下:

[crayon-5b7…
阅读全文 »