我注意到 maps.google.com 上的缩放行为与使用 google 地图 API 版本 3 的自定义地图不同(阅读:更平滑)。后来我发现这也适用于 Google here 的演示。
有没有办法使用 Google Maps API v3 在地图上获得同样平滑的缩放感觉?
我一直在网上寻找解决方案,但我所能找到的只是人们询问如何制作缩放动画,这不是我正在寻找的。
原生 Google 地图网站 maps.google.com 使用 HTML5 canvas 元素来渲染地图。 Google Maps API v3 没有。目前(截至 2015 年末)不可能使用 Google 地图 API 获得平滑的连续缩放行为。
在 Google 文档和网络上搜索没有结果的答案后,我花了一些时间来了解 API v3 以及 maps.google.com 基本上如何渲染和显示地图。有一个主要区别可以立即清楚地说明为什么使用 API 无法进行连续缩放:
Google Maps API v3 创建由 图像图块 组成的地图,每个图像图块渲染到具有固定默认大小
<div />
的单个 256 x 256 px
容器中。切换缩放级别时,每个图块都必须使用新图像(任何类型,可能使用自定义叠加等动态样式)重新渲染。这是一项非常昂贵的任务,因此每个额外的缩放步骤都会增加需要加载的额外资源以及通过 DOM 操作重新渲染整个场景的额外计算成本。即使在高 CPU/内存机器上使用现代浏览器,流畅的缩放体验也几乎是不可能的。maps.google.com 使用 HTML5 canvas 对象 来渲染地图场景(我很确定旧浏览器有一个 API v3 样式后备变体)。在本机支持的画布对象中绘制比在 DOM 元素中替换图像要便宜得多。谷歌使用基于“矢量图形”的方法,基本上允许连续放大细节,而不需要获取额外的资源。不过,特定缩放级别所需的额外信息可以作为较小的数据块获取并应用于绘图例程。
不可能实现“平滑缩放”。不管怎样,让我们期待 Google Maps API v4!