google-maps - 在 maps.google.com 上的缩放比在 Google Maps API v3 上更流畅

Question

我注意到 maps.google.com 上的放大与使用 google maps api 版本 3 的自定义 map 的行为不同(阅读:更平滑)。后来我发现这也适用于谷歌的演示 here .

有没有办法使用 Google Maps API v3 在 map 上获得同样平滑的缩放感觉？

我一直在尝试在网上搜索解决方案，但我能找到的只是人们问如何做缩放动画，这不是我想要的。

Answer 1

原生谷歌地图网站maps.google.com使用 HTML5 Canvas 元素呈现 map 。 Google Maps API v3 没有 .目前(截至 2015 年底)无法使用 Google Maps API 获得平滑的连续缩放行为。

在谷歌文档和网络上搜索没有结果的答案后，我花了一些时间来了解 API v3 以及 maps.google.com 基本上如何工作以呈现和显示 map 。有一个主要区别可以立即清楚地说明为什么使用 API 无法进行连续缩放:

谷歌地图 API v3 创建一个由图像图 block 组成的 map ，每个图 block 都呈现为单个 <div />具有固定默认大小 256 x 256 px 的容器.切换缩放级别时，必须使用新图像(任何类型，可能使用自定义叠加等动态设置样式)重新渲染每个图 block 。这是一项非常昂贵的任务，因此每个额外的缩放步骤都会增加额外的加载资源和额外的计算成本，以便通过 DOM 操作重新渲染整个场景。即使在高 CPU/内存机器上使用现代浏览器，流畅的缩放体验也几乎是不可能的。

maps.google.com 使用 HTML5 Canvas 对象来渲染 map 场景(我很确定旧浏览器有一个 API v3 样式的后备变体)。在原生支持的 Canvas 对象中绘图比替换 DOM 元素中的图像要便宜得多。谷歌使用基于矢量图形的方法，基本上可以连续放大细节，而无需获取额外的资源。此外，特定缩放级别所需的信息可以作为较小的数据 block 获取并应用于绘图例程。

我必须承认我不知道这是如何详细工作的。这正是我通过检查源代码发现的，我希望它能够很好地总结为什么目前无法使用 map API 进行“平滑缩放”。无论如何，让我们期待 Google Maps API v4!