我想在谷歌地图上放一个 div,即使 map 是全屏的。
当它不是全屏时,我已经可以将 div 放在 map 的前面,但我需要的是在这两种情况下都显示 div。
我需要全屏显示谷歌地图的 div 是:.cont-items-monitor
这是我的html代码:
<div class="gx-card-body">
<div class="cont-items-monitor overlay" style="display: none">
<ul>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
</ul>
</div>
<div id="google-map"></div>
</div>
我的CSS代码:
.cont-items-monitor {
position: absolute;
top: 60px;
left: 0;
bottom: 30px;
z-index: 1;
background-color: white;
overflow-x: scroll;
padding: 10px 15px 10px 0;
}
最佳答案
我终于可以解决了。
我要做的就是把我想要叠加的 div 放在初始化 Google map 时生成的第一个 div 上。
我的 html 代码是一样的,我唯一做的就是在加载网站的所有元素后用 jquery 移动它。
我的 html 代码 super 解释和验证:
(假设下面的代码在一个 html 页面的基本结构中)
<div class="gx-card-body">
<!-- <div class="cont-fab">
<a href="javascript:void(0)" class="gx-fab-btn gx-btn-primary">
<i class="zmdi zmdi-account-add zmdi-hc-fw zmdi-hc-lg"></i>
</a>
</div> -->
<div class="cont-items-monitor overlay" style="display: none">
<ul>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
<li>Seat León JMG-8823</li>
<li>Seat Ibiza JMG-8823</li>
<li>VW Vento JMG-8823</li>
<li>Nissan Versa JMG-8823</li>
<li>Nissan March JMG-8823</li>
<li>Lincoln Navigator JMG-8823</li>
</ul>
</div>
<div id="google-map"></div>
</div>
我的 JS 代码(jQuery):
$(document).ready(function () {
$('.cont-items-monitor').appendTo($('#google-map').find('div')[0]);
});
我希望它为别人服务
关于html - 如何在谷歌地图上 float 一个 div 并保持全屏显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55657163/