Javascript 让谷歌地图跨越长页面_Javascript_Html_Css_Google Maps_Google Maps Api 3

Javascript 让谷歌地图跨越长页面

javascript html css google-maps google-maps-api-3

Javascript 让谷歌地图跨越长页面,javascript,html,css,google-maps,google-maps-api-3,Javascript,Html,Css,Google Maps,Google Maps Api 3,我有一个很长的网页，也就是说，用户需要向下滚动页面以查看那里的所有信息我使用谷歌地图作为页面的背景。然而，谷歌地图只是填补了网站的第一页。当我向下滚动时，地图就不在了，它只占据了初始视图的100% 我发现谷歌地图不知道100%的跨度，因此应该明确提到高度：100%在正文中，这样当包含谷歌地图的div中提到高度：100%时，它知道它必须跨越整个网页正文我已经尝试过上述解决方案，但它不能解决我的问题。如何让谷歌地图跨越一个很长的网页基本设置如下所示： <body> <div

我有一个很长的网页，也就是说，用户需要向下滚动页面以查看那里的所有信息

我使用谷歌地图作为页面的背景。然而，谷歌地图只是填补了网站的第一页。当我向下滚动时，地图就不在了，它只占据了初始视图的100%

我发现谷歌地图不知道100%的跨度，因此应该明确提到高度：100%在正文中，这样当包含谷歌地图的div中提到高度：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>

正如其中一个答案中所建议的，如果地图背景保持不变，而页面的其余部分可以滚动，那就更好了。

在地图容器上设置一个固定位置如何。我在网上发现了这把小提琴：

它会将地图粘贴到窗口大小的页面上。

任何其他内容都可以保持滚动

您可以发布一个示例链接或显示您的代码吗？没有看到你的设置，这是很难帮助。是的，我们可以看到一些代码请。我已经添加了一些代码。但我避免放太多，因为可能很难全部看完。我用的是位置：绝对。将其更改为“固定”将停止显示地图。但我喜欢你的解决方案。如果地图保持不变，而其他内容可以滚动，那就太好了。如果你想把它用作背景，那么在我看来，这是最合理的解决方案。如果地图不再显示，请检查宽度/高度和Z索引。它肯定会出现的。我已经检查过了。仍然没有改进：在Google Chrome中检查element inspector并悬停地图容器以检查其尺寸。正如您在JSFIDLE中看到的，它应该可以工作。创建您自己的JSFIDLE并重现您遇到的问题。甚至更好；使您的代码适应JSFIDLE中的代码-为什么要修复未损坏的代码？

#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-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}