在隐藏的div（jquery-ui标签页）上使用Google Map API V3

Question

我知道这个问题很古老，但是我似乎找不到一个清晰的解决方案。

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

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

我听说可以延迟构建地图，并在点击选项卡时重新加载地图，但请帮我提供确切的代码。

- Rex

Answer 1

为什么你说"left:-1000px'不是一个优雅的解决方案"？在API v2中，它对我非常有效，并且应该也适用于API v3（未经测试，请告诉我是否无效）。

重绘，即API v2中的checkResize()在API v3中通过以下方式完成：

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

这是我的CSS代码示例，用于jquery-ui标签页（受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;
}

- Tomas

---

感谢Tomas。对我来说，' -10000px '似乎有点 hacky，但我还是会试一试。谢谢！！ - Rex

@Rex，刚刚加了一个零，现在很优雅啊！ :-) - Tomas

@Tomas 哈哈，是的，它有效。但我仍然想知道如何延迟构建地图，或者如何重新加载地图 :) - Rex

@Rex，重新加载地图是通过google.maps.event.trigger(map, 'resize')调用完成的。至于“延迟构建地图”-你可以在任何时候构建地图对象-是你自己调用构造函数！ - Tomas

Answer 2

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

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

- msm2020