gpt4 book ai didi

javascript - 自定义街景 map 上的响应式叠加 div

转载 作者:行者123 更新时间:2023-12-03 10:32:04 25 4
gpt4 key购买 nike

我正在创建我的大学的自定义室内街景,因此我没有 LatLng 值来添加标记,是否可以在 map 上放置一个叠加层,使其保留在图像上的一个位置?

我的意思是,如果门上有一个 div 覆盖层,则在移动 map 时,div 覆盖层应随 map 移动,并在必要时离开屏幕。(所以基本上是一个不需要 Latlng 参数的自定义标记)。

我尝试摆弄 CSS 位置属性,但没有成功,有可能吗?

最佳答案

您可以使用 css 过渡,这是我的[图像叠加][1]

[1]: http://codepen.io/dfrierson2/pen/NPeOoJ

.gallery figure {
display: inline-block;
width: 315px;
height: 268px;
margin: 0 5px 5px 5px;
position: relative;
}
.gallery figcaption {
position: absolute;
width: 290px;
height: 217px;
bottom: 32px;
left: 13px;
right: 0px;
top: 11px;
opacity: 0;
border: 1px solid #ddd;



}
.gallery figcaption:hover {
opacity: 1;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;

}

<body>

<!--Image overlay starts here-->

<div class="gallery">
<h1>Image Overlay</h1>
<figure>
<a href="#"><img src="http://placehold.it/315x268"></a>
<figcaption><img src="http://placehold.it/290x217"/></figcaption>
</figure>



</div>


</body>

关于javascript - 自定义街景 map 上的响应式叠加 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29163288/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com