首页 文章

Google Map 不会全屏渲染整个 Map

提问于
浏览 次
2

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

This is how the map shows upon click on the link to toggle full screen

我在这个事件中测试了jQuery中的 css() 和 toggleClass() . toggleClass() 使 Map 变得不可见（完全隐藏 Map 而不是全屏显示），使用以下代码：

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

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

css() 有效（ Map 全屏显示），但上图显示 Map 在全屏幕上呈现的方式：

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

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

提前致谢 .

css google-maps-api-3 fullscreen

1 回答

  • 4

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

    回复于

相关问题