Question

我正在寻找更好的解决方案。

我正在尝试使用Google地图填充浏览器屏幕的中间位置。（在菜单和页脚之间）在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>

Answer 1

当您知道页眉和页脚的高度时，它并不复杂。

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

.container-fluid另外设置：

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

现在#map_canvas的大小与浏览器视口大小相同。 ...但地图部分由标题＆amp;页脚。

要解决此问题，请将#map_canvas的边框宽度设置为：

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

#map_canvas现在仍然会被标题＆amp;页脚，但没关系，被覆盖的部分是边界

完成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 Map用Bootstrap填充div

1 个答案: