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

Posted 2023-03-03

【中文标题】在 maps.google.com 上的缩放比在 Google Maps API v3 上更流畅

【英文标题】：Zoom is smoother on maps.google.com than on Google Maps API v3

【发布时间】：2015-07-08 11:18:17

【问题描述】：

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

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

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

【问题讨论】：

Google Maps 不使用 Google Maps javascript API v3（至少我最近才知道）。

【参考方案1】：

原生 Google 地图站点 maps.google.com 使用 HTML5 画布元素来呈现地图。 Google Maps API v3 没有。目前（截至 2015 年底）无法使用 Google Maps API 获得平滑的连续缩放行为。

在 Google 文档和网络上搜索没有结果的答案后，我花了一些时间了解 API v3 以及 maps.google.com 的基本工作原理并显示地图。有一个主要区别可以立即说明为什么使用 API 无法进行连续缩放：

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

ma​​ps.google.com 使用 html5 canvas 对象 渲染地图场景（我很确定旧浏览器有 API v3 样式的后备变体)。在原生支持的画布对象中绘图比在 DOM 元素中替换图像要便宜得多。 Google 使用基于 矢量图形 的方法，该方法基本上允许对细节进行连续放大，而无需获取额外的资源。此外，特定缩放级别所需的信息可以作为较小的数据块获取并应用于绘图例程。

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

【参考方案2】：

还有其他 JavaScript 映射库允许平滑缩放，例如 Mapbox-GL 和 Cesium。他们都使用 WebGL，就像 maps.google.com 一样。

https://www.mapbox.com/mapbox-gl-js/example/fitbounds/

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases

【参考方案3】：

我认为现在这取决于 Google 地图是否在 Lite Mode 中，这似乎是他们对基于图像平铺地图的老式地图的名称，而不是基于画布的地图。

根据 Google 地图的 System and Browser requirements 文档，地图将禁用某些显卡的 3D，而对于某些显卡，它会超出此范围，仅允许您使用精简模式。