不可见时初始化谷歌地图=错误答案

【问题标题】：initializing google map while invisible = bug不可见时初始化谷歌地图=错误
【发布时间】：2012-11-20 17:45:54
【问题描述】：

我在初始化谷歌地图时遇到了这个错误 - 而画布隐藏在（非活动）选项卡上。 -> 它是可滚动和可缩放的，但不会在整个画布上延伸，画布的其余部分保持灰色。

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

我有两种情况（在页面加载时初始化地图）： 1.页面加载显示TAB1（带地图） 2.页面加载显示TAB2（无地图）

在场景 1 中一切正常，地图显示和显示，正常运行。在场景 2 中，地图如上图所示

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

是否有正确重新初始化 gmap 元素的选项？
一种重新膨胀 gmap 元素的方法？
您是否遇到过类似的错误并知道我的解决方案？

谢谢！帕特里克

【问题讨论】：

问题是当元素不显示时，它们无法正确计算宽度。
有没有办法重新膨胀 gmap 元素 - 是的 google.maps.event.trigger(map,'resize')

标签： javascript jquery google-maps

【解决方案1】：

正如前面的答案中提到的，谷歌地图在初始化时只呈现其容器大小的地图。当包含元素不可见时，地图呈现大小为 0x0。

您需要通过在地图本身上触发 resize 事件来通知地图其包含的大小已更改。

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

【讨论】：

你什么时候触发这个？如果地图已经渲染，则无需再次触发。
@Sparky672 每次容器更改时都会触发它。如果您正在使用响应式设计，则每次调整窗口大小时都会触发此操作。
是的，当然，但这可能与 OP 相关，也可能不相关。我的观点是，您不需要每次访问标签时都触发它在第一次呈现它之后。换句话说，您需要测试地图是否已经渲染过，或者您是否正在重新渲染多次。

【解决方案2】：

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

【讨论】：

【解决方案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;
        });
    }

});

【讨论】：