我有一个很长的网页，即用户需要向下滚动页面才能看到那里的所有信息。
我使用谷歌地图作为页面的背景。然而，谷歌地图只填满了网站的第一页。我一向下滚动， map 就不再存在了，它只填充了初始 View 的 100%。
我遇到了 this answer这表明谷歌地图不知道 100% 的内容要跨越，因此应该在 body 中明确提到 height:100% ，这样当包含谷歌地图的 div 中提到 height:100% 时，它就知道它必须跨越整个网页。
我已经尝试了上面的解决方案，但它并没有解决我的问题。我如何让谷歌地图跨越一个很长的网页？
基本设置是这样的:
<body>
<div id="main-content"> <!--The main data is held here. This is the forefround-->
This in turn contains several divs and the main information
</div>
<div id="map-canvas">
</div>
</body>
css如下:
#map-canvas {
width: 100%;
height: 100%;
position: absolute; /*changing this to fixed makes the map dissapear*/
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
#main-content {
z-index: 100;
position: relative;
}
html, p, body {
margin: 0;
padding: 0;
line-height: 24px;
font-size: 16px;
font-weight: 400;
height: 100%;
}
正如其中一个答案所建议的那样，如果 map 背景保持不变而页面的其余部分可滚动，那就太好了。
最佳答案
如何在 map 容器上设置一个固定位置。
我在网上遇到了这个 fiddle :
http://jsfiddle.net/X5r8r/927/
#map-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
它会根据窗口大小将 map 粘贴到页面上。
任何其他内容都可以保持可滚动。
关于javascript - 使谷歌地图跨越长页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20630127/