Question

我有一个谷歌地图，其中有一段内容超过了laiyng，这就是我需要的。

我需要能够在谷歌地图下面添加更多内容..但我无法弄清楚如何让正在进行的div容器位于地图下方。

我已经尝试将位置设置为静态，但它不起作用？

以下是我的代码： -

HTML

<div id="content">

  <iframe id="gmap" width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=55.886721,-4.33651&amp;spn=0.011553,0.027466&amp;z=15&amp;output=embed"></iframe>
  <div class="container overlap">
    <h1>Content</h1>

  </div>
</div>

<div class="moreContent">

  <p>I would like to sit below the google map!</p>

<div>

CSS。

#gmap {
  position:absolute;top:0;left:0;z-index:1;
}
.overlap{
  position: relative;
  z-index:2;
  background: white;
  height : 200px;
  width : 200px;
  margin-top: 100px;
}

.moreContent{
  /* How doi position this container? */
}

Answer 1

你可以这样做

.moreContent{
    position:absolute; 
    top:450px
}

但更好的解决方案是不在position:absolute;元素上使用#gmap。

此外，您正在使用iframe将地图嵌入到您的网页中，更好的解决方案是使用Google Maps JavaScript API。

以下是我将如何做到这一点：

＆＃13;

#map{
  width: 600px;
  height: 450px;
}

.overlap{
  position:absolute;
  top:100px;
  z-index:2;
  background: white;
  height : 200px;
  width : 200px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <div id="map"></div>
    
    <div class="container overlap">
       <h1>Content</h1>
    </div>
    <div class="moreContent">
        <p>I would like to sit below the google map!</p>
    <div>
    
    
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 55.886721, lng:-4.33651},
          zoom: 15
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer></script>
  </body>
</html>

＆＃13;

如果您使用的是Google Maps JavaScript API，则可以通过创建自定义控件在地图上添加元素，您可以在此处找到有关此内容的更多信息：https://developers.google.com/maps/documentation/javascript/controls#CustomControls

在Google地图下定位内容

1 个答案: