NavBar下的全屏地图

Question

我正在尝试将地图添加为Bootstrap NavBar下方的全屏幕背景，但目前我的代码导致地图底部溢出页面。

我尝试了不同的边距和位置，我无法在导航栏下的页面范围内显示地图。我知道问题的一部分是顶部：50px但我不知道如何纠正这个问题。

我的CSS代码如下：

  #map { 
  /* Set rules to fill background */
   height: 100%;
   width: 100%;

     /* Set up positioning */
    position: fixed;
    top: 50px;
    left: 0;

   }

以下是我的页面的屏幕截图，您可以在右下角看到地图属性和控件已被切断：

Answer 1

您将地图高度设置为100％。请尝试设置固定高度。

如果它太宽，请将其添加到CSS文件中。

.gmnoprint img {
    max-width: none; 
}

或者，如果不起作用，请尝试此操作：

html,body {
    height: 100%; 
    width: 100%;
}
.whateveryourmapis {
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    margin-top: -50px;
}

Answer 2

你需要等到显示内容的div，因为谷歌地图早期将其宽度提升了 - 并获得小宽度（或0）并且不渲染。

试试这个：

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        google.maps.event.trigger(map, 'resize');
    });

回调 - 当点击标签后显示内容的div时，会调整大小＆＃39;谷歌地图的正确宽度。

对我而言，这是有效的。