我有一张谷歌地图，上面有一 block 内容在 laiyng 上，这正是我所需要的。
我需要能够在谷歌地图下方添加更多内容..但我无法弄清楚如何让正在进行的 div 容器位于 map 下方。
我试过将位置设置为静态，但它不起作用？
下面是我的代码笔:-
http://codepen.io/dyk3r5/pen/LRmWbq
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&ll=55.886721,-4.33651&spn=0.011553,0.027466&z=15&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? */
}
最佳答案
你可以这样做
.moreContent{
position:absolute;
top:450px
}
但更好的解决方案是不在 #gmap 元素上使用 position:absolute;。
此外，您正在使用 iframe 将 map 嵌入到您的页面中，更好的解决方案是为此使用 Google Maps JavaScript API。
这是我将如何做到的:
#map{
width: 600px;
height: 450px;
}
.overlap{
position:absolute;
top:100px;
z-index:2;
background: white;
height : 200px;
width : 200px;
}<!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>如果您使用的是 Google Maps JavaScript API，则可以通过创建自定义控件在 map 上添加元素，您可以在此处找到更多相关信息:https://developers.google.com/maps/documentation/javascript/controls#CustomControls
关于html - 在谷歌地图下定位内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39974743/