如何让Google Maps用Bootstrap填充div [英] How to get Google Map to fill div with Bootstrap
问题描述
我正在寻找更好的解决方案.
I am looking for a better solution.
我正在尝试用Google Map填充浏览器屏幕的中间.(在菜单和页脚之间)在IE上，以下代码可以正常工作.有时它适用于Chrome，但几乎始终只在Firefox的map_canvas的25％中显示地图.
I am trying to fill the middle of the browser screen with a Google Map. (between menu and footer) On IE the below code works fine. Sometimes it works for Chrome but almost always only shows the map in 25% of the map_canvas on Firefox.
现在，在页面呈现整个map_canvas div之后，它会变成灰色并填充该区域，因此100％可以在所有浏览器中使用.如果我调整浏览器的大小，则地图将填满整个区域，因此发生resize事件时，它将在所有浏览器中正常工作.问题是在Chrome和Firefox中，地图仅占据map_canvas div的灰色区域的大约25％.
Now after the page renders the entire map_canvas div is grey and fills the area so the 100% works in all browsers. If I resize the browser the map fills the whole area so on resize event it works in all browsers. The problem is in Chrome and Firefox the map only takes up about 25% of the grey area of the map_canvas div.
因此，我唯一能想到的就是IE中div的CSS发生在渲染地图之前，而在Chrome和Firefox中，它发生在渲染地图之后.我不知道这是否是因为我正在使用引导程序或其他问题.
So the only thing I can think of is in IE the CSS for the div happens before the map is rendered and in Chrome and Firefox it happens after the map is rendered. I don't know if this is because I am using bootstrap or a problem with something else.
我暂时无法使用此代码.通过将map_canvas高度设置为文档高度减去菜单/页脚，地图将始终显示在所有浏览器中.这样的问题是，如果用户调整屏幕大小，则地图不调整大小，这很尴尬并且看起来很糟.我想在无奈之下我可能会重载Windows的resize事件，并不断更改map_canvas的大小，但这听起来也像是一个丑陋的hack.寻找不那么难看的东西.
I have a temp work around using this code. By setting the map_canvas height to the document height minus the menu/footer the map always displays in all browsers. The problem with this is if the user resizes the screen the map does not resize which is awkward and looks bad. I guess in desperation I could overload the windows resize event and just keep changing the map_canvas size but that sounds like a ugly hack too. Looking for something less ugly.
$("#map_canvas").css("min-height", $(document).height() - 70);
浏览器sudo代码
<!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>
推荐答案
知道页眉和页脚的高度并不复杂.
When you know the height of header and footer it's not complicated.
将 html ， body ， .container-fluid 和 #map_canvas 的高度设置为100％；
Set the height of html,body , .container-fluid and #map_canvas to 100%;
对于 .container-fluid 的其他设置:
width:100%;
position:absolute;
top:0;
现在 #map_canvas 的大小将与浏览器的视口相同....但是地图部分被标题&页脚.
Now #map_canvas will have the same size as the browsers viewport.
...But the map is partially covered by header & footer.
要修复此问题，请将 #map_canvas 的边框宽度设置为:
To fix it set the border-width of #map_canvas to:
top:height of the header
bottom:height of the footer
#map_canvas 现在仍然会被标题&页脚，但这没关系，覆盖的部分是边框
#map_canvas now still will be covered by header & footer, but it doesn't matter, the covered parts are the border
完整的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/
这篇关于如何让Google Maps用Bootstrap填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
