0

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

在此处输入图像描述

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

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

在场景 1 中，一切都很好，地图显示和显示，正常运行。在场景 2 中，地图看起来像上图

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

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

谢谢！帕特里克

4

3 回答 3

2

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

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

// Assuming "map" is the map object returned by "google.maps.Map"
google.maps.event.trigger(map, 'resize');
于 2012-11-20T18:16:38.257 回答
1

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

于 2012-11-20T17:52:31.360 回答
0

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

$(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;
        });
    }

});
于 2012-11-20T18:08:26.230 回答