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

Question

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

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

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

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

Answer 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;
}

Answer 2

如果您不能依赖选项卡显示事件，您可以在选项卡链接单击事件上添加该事件，而不是在页面就绪时调用 initialize() 。

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