在invisible = bug时初始化谷歌地图

Question

我在初始化Google地图时遇到此错误 - 而画布隐藏在（非活动）标签上。 - ＆GT;它是可滚动和可缩放的，但不会在整个画布上延伸，画布的其余部分保持灰色。

我正在使用jQuery Map Extension（http://code.google.com/p/jquery-ui-map/）在我的页面上加载gmap。还有两个选项卡视图，其中一个选项卡上没有地图，另一个选项卡上有gmap。

我有两个场景（在pageload上初始化地图）： 1.页面加载显示TAB1（带地图） 2.页面加载显示TAB2（没有地图）

方案1中的

一切都很好，地图显示和显示，行为正常。 在方案2中，地图看起来像上面的图像

我在切换标签时尝试再次初始化地图。但这似乎没有任何效果。

• 是否可以选择正确重新初始化gmap元素？
• 一种重新膨胀gmap元素的方法吗？
• 你有类似的错误并知道我的解决方案吗？

谢谢！ 帕特里克

Answer 1

如前面的答案所述，Google地图在初始化时，只会呈现其容器大小的地图。当包含元素不可见时，地图呈现大小为0x0。

您需要通过触发地图上的resize事件来通知地图其包含的内容已更改。

// Assuming "map" is the map object returned by "google.maps.Map"
google.maps.event.trigger(map, 'resize');

Answer 2

已知问题/按预期工作。在单击选项卡后，您必须向选项卡添加处理程序以在选项卡中初始化地图。相反，在选项卡处于活动状态之前，请不要初始化地图。

Answer 3

如前所述，这是一个已知问题。解决方案是在显示选项卡时动态加载地图。我看不到你的代码，所以这里是一个非常简单的通用解决方案。修改用于显示选项卡内容的任何功能，如下所示。加载特定选项卡时，检查地图是否存在并在需要时加载。

$(document).ready(function() {

    function my_tab_reveal() {  // or whatever function you use for showing your tabs content
        // whatever your code for revealing tab content is here

        if (!loaded) {  // this checks to see if the map is not already loaded
            load(); // this loads the map
        }
    }

    var loaded = false;
    load = function() {
        // your google maps JavaScript code goes here

        // checks tiles to see if map has loaded
        google.maps.event.addListener(map, "tilesloaded", function() {
            loaded = true;
        });
    }

});