注意：因本页面引用了 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 值。函数代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
// 地图选项 var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; // 创建地图实例 var map = new google.maps.Map(document.getElementById("map"),mapOptions); var level = {'from': 8, 'to': 0}; var btnMap = document.getElementById("btnZoom"); // 绑定点击事件 btnMap.onclick = function(){ var zoomLevel = document.getElementById("txtZoom").value; level.from = map.getZoom(); level.to = zoomLevel; try{ jzZoom(Number(zoomLevel)); } catch(e) { alert("请输入正确的 zoom 值!"); } }; // 根据 level.from 和 level.to 的大小比较选择合适的缩放函数 function jzZoom(zoomLevel){ if(level.from < level.to){ zoomInTo(); } else if(level.from > level.to){ zoomOutTo(); } else{ map.setZoom(zoomLevel); } } // 放大功能 function zoomInTo() { level.from += 2; if(level.from < level.to){ map.setZoom(level.from); setTimeout('zoomInTo()', 100); } else { map.setZoom(level.to); return; } } // 缩小功能 function zoomOutTo() { level.from -= 2; if(level.from > level.to){ map.setZoom(level.from); setTimeout('zoomOutTo()', 100); } else { map.setZoom(level.to); return; } } |
效果演示如下：
结束
今天大概看了下文档，发现又添加了新的数据结构，例如新的 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/