分类: 技术

使用 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 值。函数代码如下:

效果演示如下:

结束

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

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

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

注:转载注明出处并联系作者,本文链接:https://nodefe.com/google-maps-zoom-smoothly/

发表评论

评论

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax