2

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

这是地图在单击链接以切换全屏时显示的方式

我已经在这个事件上测试了 jQuerycss()和jQuery。使用以下代码使地图不可见（完全隐藏地图而不是使其全屏显示）：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'
                      });

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

提前致谢。

4

1 回答 1

4

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

于 2012-04-09T00:01:27.017 回答