maps.google.com上的缩放比Google Maps API v3上的缩放更平滑

时间:2015-04-29 09:12:02

标签: google-maps google-maps-api-3

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

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

我一直试图在网上寻找解决方案,但我能找到的只是人们会问如何进行缩放动画,这不是我想要的。

3 个答案:

答案 0 :(得分:13)

原生Google地图网站maps.google.com使用HTML5 canvas元素渲染地图。 Google Maps API v3不支持。目前(截至2015年底)无法使用Google Maps API获得平滑的连续缩放行为。

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

  1. Google Maps API v3 会创建一个由图片图块构成的地图,每个地图都会呈现为单个<div />容器,其默认大小为{{1 }}。切换缩放级别时,必须使用新图像(任何类型,可能使用自定义叠加层动态设置样式等)重新渲染每个图块。这是一项非常昂贵的任务,因此每增加一个缩放步骤都会增加额外的资源以及通过DOM操作重新渲染整个场景所需的额外计算成本。即使在高CPU /内存机器上使用现代浏览器,也几乎不可能获得流畅的变焦体验。

  2. maps.google.com 使用HTML5 画布对象来渲染地图场景(我非常确定那里有API v3样式旧浏览器的后备变体)。在本机支持的画布对象中绘制比在DOM元素中替换图像更便宜。 Google使用基于矢量图形的方法,基本上允许连续缩放到细节,而无需获取额外的资源。此外,特定缩放级别所需的信息可以作为较小的数据块提取并应用于绘图程序。

  3. 我必须承认,我不知道这是如何运作的。这是我通过检查来源发现的,我希望它几乎总结了为什么一个&#34;平滑缩放&#34;使用maps API无法当前。无论如何,让我们期待Google Maps API v4

答案 1 :(得分: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

答案 2 :(得分:0)

我认为现在取决于Google地图是否在Lite Mode,这似乎是他们的名字,用于旧式的基于图片图块的地图,而不是基于画布的地图。

根据谷歌地图&#39; System and Browser requirements的文档,地图将禁用某些视频卡的3D,对于某些视频卡,它不仅限于此,只允许您使用精简模式。