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

问题描述 投票:0回答:4

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

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

我一直在网上寻找解决方案,但我所能找到的只是人们询问如何制作缩放动画,这不是我正在寻找的。

google-maps google-maps-api-3
4个回答
15
投票

原生 Google 地图网站 maps.google.com 使用 HTML5 canvas 元素来渲染地图。 Google Maps API v3 没有。目前(截至 2015 年末)不可能使用 Google 地图 API 获得平滑的连续缩放行为。

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

  1. Google Maps API v3 创建由 图像图块 组成的地图,每个图像图块渲染到具有固定默认大小

    <div />
    的单个
    256 x 256 px
    容器中。切换缩放级别时,每个图块都必须使用新图像(任何类型,可能使用自定义叠加等动态样式)重新渲染。这是一项非常昂贵的任务,因此每个额外的缩放步骤都会增加需要加载的额外资源以及通过 DOM 操作重新渲染整个场景的额外计算成本。即使在高 CPU/内存机器上使用现代浏览器,流畅的缩放体验也几乎是不可能的。

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

  3. 我必须承认我不知道它的详细工作原理。这正是我通过检查源代码发现的,我希望它能很好地总结为什么使用地图 API
目前

不可能实现“平滑缩放”。不管怎样,让我们期待 Google Maps API v4


2
投票

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

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


0
投票
Lite 模式

,这似乎是他们对老式基于图像图块的地图的名称,而不是基于画布的地图。 根据 Google 地图关于

系统和浏览器要求

的文档,地图将为某些视频卡禁用 3D,而对于某些视频卡,它会超出此范围,只允许您使用 Lite 模式。


0
投票

© www.soinside.com 2019 - 2024. All rights reserved.