隐藏 div 上的 Google Map API V3（jquery-ui 选项卡）答案

【问题标题】：Google Map API V3 on hidden div (jquery-ui tabs)隐藏 div 上的 Google Map API V3（jquery-ui 选项卡）
【发布时间】：2012-01-10 11:51:16
【问题描述】：

我知道这个问题很古老，但我似乎找不到明确的说明。

问题的要点是当谷歌地图加载到隐藏的（显示：无）div上时，它不会完全加载（部分显示），例如jQuery 选项卡等。

API V3 不再接受 checkResize()，'left:-1000px' 不是一个优雅的解决方案。

我听说延迟构建地图，并在单击选项卡时重新加载地图，但请帮助我了解确切的代码。

【问题讨论】：

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

【解决方案1】：

为什么说“left:-1000px' 不是一个优雅的解决方案”？它在 API v2 中对我很有用，也应该适用于 API v3（未经测试，如果它不起作用，请告诉我）。

重绘，即 API v2 checkResize() 在 API v3 中以这种方式完成：

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

这是我的 jquery-ui 标签的 CSS 示例（灵感来自 http://jqueryui.com/demos/tabs/):

.ui-tabs .ui-tabs-hide#my_tabs-1 { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

【讨论】：

感谢托马斯。 '-10000px' 对我来说似乎有点 hacky，但无论如何我都会试一试。谢谢！！
@Rex，刚刚加了一个零，现在很优雅！ :-)
@ Tomas 哈哈，是的，它有效。但我仍然想知道如何延迟构建地图，或者如何重新加载地图:)
@Rex，重新加载地图是通过google.maps.event.trigger(map, 'resize') 调用完成的。至于“延迟构建地图”——构建地图对象时由你决定——调用构造函数的是你！

【解决方案2】：

如果您不能依赖 Tab Show 事件，您可以在 Tab Link 点击事件中添加该事件，而不是在页面就绪时调用 initialize()。

$('#TabLink').click(function() {
    initialize();
});

【讨论】：