Google地图不会全屏渲染整个地图

Question

我在调整Google Maps JavaScript API v3的大小时遇到​​了一些问题。如果我在加载时设置CSS“参数”（仅在documentation中），地图将显示100％的高度和宽度 - 没问题。但是当我尝试通过点击链接获得相同的结果时，它并没有显示整个地图。

我已在此事件中测试了jQuery中的css()和toggleClass()。 toggleClass()使用以下代码使地图变得不可见（完全隐藏地图而不是全屏）：

// jQuery
$('#weather-map').toggleClass('test');

// CSS
#weather-map.test {
    height : 100%;
    width : 100%;
    top : 0;
    left : 0;
    position : absolute;
    z-index : 200;
}

css()有效（地图全屏显示）但上图显示地图在全屏显示的方式：

$('#weather-map').css({
                       'height' : '100%',
                       'width' : '100%',
                       'top' : '0',
                       'left' : '0',
                       'position' : 'absolute',
                       'z-index' : '200'
                      });

我现在想知道，为什么会这样？我错过了什么，或者这种方法不适合切换地图的全屏？

提前致谢。

Answer 1

这只是因为Google的映射Javascript的工作原理。它根据容器的大小进行渲染，并且在以后容器重新调整大小的情况下不会添加任何类型的处理程序来重新渲染。我想在上面的示例中，您必须再次调用地图初始化代码，以便在调整大小的div中再次渲染地图。