如何让Google Map使用Bootstrap填充div

问题描述：

我正在寻找更好的解决方案。如何让Google Map使用Bootstrap填充div

我想用Google Map填充浏览器屏幕的中间部分。（菜单和页脚之间）在IE浏览器下面的代码工作正常。有时它适用于Chrome，但几乎总是只在Firefox的map_canvas的25％中显示地图。

现在页面呈现整个map_canvas div是灰色的并填充区域，因此100％适用于所有浏览器。如果我调整浏览器的大小，那么地图会填满整个区域，所以在所有浏览器中都可以使用resize事件。问题出在Chrome和Firefox上，地图只占map_canvas div灰色区域的25％左右。

所以我唯一能想到的是在IE中，div的CSS发生在地图呈现之前，Chrome和Firefox在地图呈现之后发生。我不知道这是因为我正在使用bootstrap还是有其他问题。

我有一个使用此代码的临时工作。通过将map_canvas高度设置为文档高度减去菜单/页脚，地图始终显示在所有浏览器中。这个问题是，如果用户调整地图不调整大小的屏幕，这是尴尬和看起来不好。我想绝望，我可以超载窗口调整大小事件，只是不断改变map_canvas大小，但这听起来像一个丑陋的黑客。寻找不那么丑陋的东西。

$("#map_canvas").css("min-height", $(document).height() - 70);

浏览器须藤代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- header stuff --> 
<style> 
<!-- in CSS file --> 
#map_canvas 
{ 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
</style> 
</head> 
<body> 
    <header class="hidden-print"> 
     <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container"> 
     menus 
     </div> 
    </div> 
    </header> 
    <div class="container-fluid"> 
    <div id="map_canvas" class="map_canvas"> 
    </div> 
    </div> 
    <footer class="navbar-default navbar-fixed-bottom"> 
     <div class="row"> 
     stuff 
     </div> 
    </footer> 
     <script type="text/javascript"> 
     $(function() { 
     var mapDiv: HTMLElement = document.getElementById("map_canvas"); 
     /// Set control options for map 
     var zoptions = { 
      position: google.maps.ControlPosition.TOP_RIGHT, 
      style: google.maps.ZoomControlStyle.SMALL 
     }; 
     /// Position of map using coord that were passed else do nothing. 
     var pos = new google.maps.LatLng(40.716948, -74.003563); 
     /// Set basic map options using above control options 
     var options: google.maps.MapOptions = { 
      zoom: 10, 
      zoomControlOptions: zoptions, 
      mapTypeId: google.maps.MapTypeId.TERRAIN, 
      center: pos 
     }; 
     this.map = new google.maps.Map(mapDiv, options); 
     }) 
     </script> 
</body>

答

当你知道标题的高度和页脚它并不复杂。

将高度html,body, .container-fluid和#map_canvas设置为100％;

对于.container-fluid additionaly集：

width:100%; 
position:absolute; 
top:0;

现在#map_canvas将具有相同大小的浏览器的视口。 ...但地图部分由标题&页脚覆盖。

要修复它设置的#map_canvas边境宽度：

top:height of the header 
bottom:height of the footer

#map_canvas现在仍然将页眉页脚&被覆盖，但不要紧，被覆盖的部分为边界

完整的CSS：

html, body, .container-fluid, #map_canvas { 
    height:100%; 
} 
.container-fluid { 
    width:100%; 
    position:absolute; 
    top:0; 
    padding:0; 
} 
#map_canvas { 
    border-top:50px solid #fff; 
    border-bottom:20px solid #fff; 
} 
header { 
    height:50px; 
} 
footer { 
    height:20px; 
}

演示：http://jsfiddle.net/doktormolle/ued0j2vs/

谢谢，基本上做到了。在容器流体顶部添加了一个边距，以将菜单移动到菜单下方，否则地图控件将被隐藏。 – 2014-12-05 16:52:38

谢谢。这也适用于Bootstrap 4。 – Wikki 2017-10-24 13:25:59

如何让Google Map使用Bootstrap填充div

相关推荐