自定义街景地图上的自适应叠加层 div
Responsive overlay div on custom Streetview map
我正在创建我大学的自定义室内街景,所以我没有 LatLng 值来添加标记,是否可以在地图上放置一个叠加层,该叠加层将保留在图像的一个位置?
我的意思是,如果门的顶部有一个 div 叠加层,则在移动地图时,div 叠加层应随地图一起移动,并在必要时离开屏幕。
(所以基本上是一个不需要 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>
我正在创建我大学的自定义室内街景,所以我没有 LatLng 值来添加标记,是否可以在地图上放置一个叠加层,该叠加层将保留在图像的一个位置?
我的意思是,如果门的顶部有一个 div 叠加层,则在移动地图时,div 叠加层应随地图一起移动,并在必要时离开屏幕。 (所以基本上是一个不需要 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>