Question

我有一个很长的网页，即用户需要向下滚动页面才能看到那里的所有信息。

我使用谷歌地图作为页面的背景。但是，Google地图只填写了网站的第一页。当我向下滚动时，地图就不再存在，它只填充了初始视图的100％。

我遇到了this answer，这表明Google地图不知道100％的跨度，因此应该明确提到身高：100％在身体中，以便在包含div的高度：100％时谷歌地图，它知道它必须跨越整个网页。

我已尝试过上述解决方案，但它没有解决我的问题。如何让Google地图跨越很长的网页？

基本设置如下：

<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%;
}

正如其中一个答案中所建议的那样，如果地图背景保持不变，而页面的其余部分可滚动，那将会很不错。

Answer 1

如何在地图容器上设置固定位置我在网上看到了这个小提琴：

http://jsfiddle.net/X5r8r/927/

#map-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

它会将地图粘贴到窗口大小的页面上任何其他内容都可以保持滚动状态。

使Google地图跨越长页面

1 个答案: