谷歌地图 v3：如何强制重新加载瓷砖答案

【问题标题】：Google maps v3: how to force reloading of tiles谷歌地图 v3：如何强制重新加载瓷砖
【发布时间】：2012-08-23 19:14:59
【问题描述】：

我遇到了非常烦人的问题。我开始用较慢的互联网连接测试我的谷歌地图代码，它不再像想象的那样工作了。

问题是我在地图上做动画时正在监听"tilesloaded" 事件，但是因为连接速度很慢，某些图块可能会挂起并且无法加载。地图中间会有灰色图块，我的程序不会继续，因为它等待加载。

我使用 firebug 控制台捕获错误，它说：

图像损坏或截断：https://mts0.googleapis.com/vt?lyrs=m@183000000&src=apiv3&hl=fi-FI&x=18706&y=8527&z=15&s=Galil&style=api%7Csmartmaps

我将其粘贴到浏览器并从那里找到丢失的平铺图像。该死！它存在但有时不加载:)

所以问题是 如何在一段时间后强制重新加载丢失的图块或所有图块，据我所知，如果某些图块无法触发，则不会触发此类事件被加载？似乎并不总是给出控制台出现的错误。我也尝试使用谷歌地图的"idle" 事件，但它不会等待加载瓷砖，并且会使程序继续滞后。（不是我想要的。）

我也在使用google.maps.event.trigger(my_map, 'resize');，但它似乎没有帮助。

编辑：

刷新整页不是一个选项，因为我会丢失我的变量值等。而且这种缓慢的加载很难测试，但是当平移到地图上的某个特定点时会发生，到目前为止需要重新加载图块。

有什么想法吗？提前谢谢！

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

是的，您绝对可以使用map.setZoom(0)。当我适应新的边界时，我使用这个函数来强制我的图块重绘：

export function setBounds(bounds) { map.setZoom(0); // forces tiles to invalidate google.maps.event.addListenerOnce(map, 'idle', () => map.fitBounds(bounds)); }

我这样做是因为我不喜欢库默认使用的平滑缩放效果。

【讨论】：

【解决方案2】：

在 javascript 地图中响应浏览器调整大小，并加载丢失的图块，因此您所需要的只是触发浏览器事件“调整大小”

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

【讨论】：

【解决方案3】：

首先，这听起来像是一个错误（如果它们超时，API 应该重试获取磁贴）。请将其提交至issue tracker。

您可以通过通知地图 mapTypeId 属性的更改来触发刷新。

google.maps.event.notify(map, 'mapTypeId')

【讨论】：

【解决方案4】：

在 V3 API 中无法访问基本地图，因此您所能做的就是销毁地图对象 (map = null) 并创建一个新的相同对象。成功下载的图块应该仍然在浏览器的缓存中。

【讨论】：

我最终采用了一种方法，该方法在实际尝试将其全部显示给用户之前将地图的某些区域加载到缓存中（这样，如果在向用户显示地图的缓存部分时只有一个图块挂起，他/她会耐心等待它的加载，而且似乎来回拖动地图会使丢失的图块出现在第二轮） - 我没有使用 map = null 的东西，因为它对我的需求来说太严格了，考虑程序状态。 +1 用于提及缓存和空案例！ :) 谢谢！