自定义街景地图上的自适应叠加div

时间:2015-03-20 09:28:56

标签: javascript google-maps css-position overlay google-street-view

我正在为我的大学创建一个自定义的室内街景,所以我没有LatLng值来添加标记,是否可以在地图上放置一个将保留在图像上的一个位置?

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

我试过摆弄CSS位置属性而没有运气,是否有可能做到?

1 个答案:

答案 0 :(得分:1)

您可以在[我的[图像叠加] [1]

中使用css过渡
[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>
相关问题