如何制作带有网站菜单覆盖的全屏谷歌地图？

Posted 2023-02-23

【中文标题】如何制作带有网站菜单覆盖的全屏谷歌地图？

【英文标题】：How to make a full screen Google Map with website menu overlay?

【发布时间】：2013-07-31 11:08:40

【问题描述】：

我正在构建一个网站，该网站主要由大型（可操作）图表和覆盖不同类型数据的 Google 地图组成。网站导航是顶部的 html div 水平条，但并非一直位于顶部。

我想找到一种方法让地图 API/应用程序显示在导航“下方”并占据整个窗口的其余部分。谁能给点建议？

【参考方案1】：

你的意思是这样的：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);

【讨论】：

如果它是您在 Google 中编辑的地图，您想要作为背景，带有地点标记和信息，该怎么办？你会把它放在哪里？

很好的例子，谢谢。