Google Maps V3 - 调整地图大小和零星地图图块加载答案

【问题标题】：Google Maps V3 - Resizing Map and Sporadic Map Tile LoadingGoogle Maps V3 - 调整地图大小和零星地图图块加载
【发布时间】：2013-07-29 19:32:50
【问题描述】：

我正在使用 Google 地图和 JqueryUI Resizable() 方法（来自 JqueryUI 1.8.7）。

如果您单击此地图的右下角，则可以拖动并展开它。 http://www.energyjustice.net/t=eb5f7o

但是，如果您将其扩大，Google 仅提供最大约 800 像素宽的地图图层。如果你让它更高，它也有类似的问题。

如果您等待几分钟，有时会加载全套图块。通常，当您扩展地图时，它的行为非常奇怪。它在 Firefox 中似乎比在 Chrome 中更好。为什么会这样？我能做些什么来避免这种零星的行为？

【问题讨论】：

标签： google-maps-api-3 jquery-ui-resizable

【解决方案1】：

一旦容器被调整大小，您需要通过触发“resize”事件告诉地图填充所有可用空间。

下面的行在您的链接中的页面上起作用（在调整大小后由 firebug 触发）

google.maps.event.trigger(map, 'resize');

根据 JQueryUI.Resizable API 文档，当触发“停止”事件（调整大小结束）时调用它应该可以完成这项工作。

【讨论】：

谢谢！在 Firefox 和 Chrome 中运行良好。
这似乎对我有用： var idleListener = this.addListenerOnce(this.map, 'idle', function() { google.maps.event.trigger(this.rootScope.map, 'resize '); google.maps.event.removeListener(idleListener); });

【解决方案2】：

经过这么多努力，我找到了这个解决方案：

请在地图初始化后添加以下代码：

var idleListener = google.maps.event.addListener(map, 'idle', function() { //important for full map shown 
  google.maps.event.trigger(map, 'resize');
  // google.maps.event.removeListener(idleListener);
});

var idleListener2 = google.maps.event.addListener(map, 'mousemove', function() {
  google.maps.event.trigger(map, 'resize');
  // google.maps.event.removeListener(idleListener2);
});

【讨论】：

如果您对谷歌地图有任何疑问，请随时联系。