我正在建立一个主要由大型(可操作)图表和覆盖不同类型数据的Google地图组成的网站。网站导航是横跨顶部的HTML div的横向栏 - 但不是一直到顶部。
我想找到一种方法让地图API / app显示在导航的“下方”并占据整个窗口的其余部分。有人可以建议吗?
答案 0 :(得分:22)
你的意思是这样的:http://jsfiddle.net/8PpjH/1/
添加容器:
<div id="container">
<div id="nav">Nav Menu</div>
<div id="map"></div>
</div>
设置一些样式:
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#container { width: 100%; height: 100% }
#nav { z-index: 100; position: absolute;
margin: 10px 0px 0px 200px; background-color: #fff;
border: 1px #000 Solid; padding: 5px; }
#map { width: 100%; height: 100% }
加载地图:
var mapOptions = {
center: new google.maps.LatLng(40.435833800555567, -78.44189453125),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);