Joh*_*hes 2 google-maps twitter-bootstrap
我正在寻找更好的解决方案.
我试图用Google Map填充浏览器屏幕的中间位置.(在菜单和页脚之间)在IE上,下面的代码工作正常.有时它适用于Chrome,但几乎总是只在Firefox上25%的map_canvas中显示地图.
现在页面呈现后整个map_canvas div为灰色并填充区域,因此100%适用于所有浏览器.如果我调整浏览器的大小,则地图会填充整个区域,因此调整大小事件可以在所有浏览器中使用.问题出在Chrome和Firefox中,地图只占map_canvas div灰色区域的25%左右.
因此,我唯一能想到的是在IE中,div的CSS在地图渲染之前发生,在Chrome和Firefox中它发生在地图渲染之后.我不知道这是因为我使用bootstrap还是其他问题.
我有一个临时使用此代码的工作.通过将map_canvas高度设置为文档高度减去菜单/页脚,地图始终显示在所有浏览器中.这个问题是如果用户调整屏幕大小,地图不会调整大小,这很尴尬,看起来很糟糕.我想在绝望中我可以重载windows resize事件,只是不断更改map_canvas大小,但这听起来像一个丑陋的黑客.寻找不那么难看的东西.
$("#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>
Dr.*_*lle 10
当您知道页眉和页脚的高度时,它并不复杂.
设置的高度html,body,.container-fluid和#map_canvas100%;
对于.container-fluid另外的集合:
width:100%;
position:absolute;
top:0;
现在#map_canvas将具有与浏览器视口相同的大小....但是地图部分由页眉和页脚覆盖.
要修复它,请将border-width设置#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/
| 归档时间： |
|
| 查看次数： |
10340 次 |
| 最近记录： |