自定义街景地图上的响应式叠加 div答案

【问题标题】：Responsive overlay div on custom Streetview map自定义街景地图上的响应式叠加 div
【发布时间】：2015-03-22 07:16:51
【问题描述】：

我正在创建我的大学的自定义室内街景，所以我没有 LatLng 值来添加标记，是否可以在地图上放置一个叠加层，使其保持在图像上的一个位置？

我的意思是如果门的顶部有一个 div 覆盖，当移动地图时，div 覆盖应该随地图一起移动，并在必要时离开屏幕。（所以基本上是一个不需要 Latlng 参数的自定义标记）。

我试过摆弄 CSS 位置属性但没有运气，有可能吗？

【问题讨论】：

看起来如果没有纬度/经度，您将无法做到这一点。叠加层与纬度/经度坐标相关联，因此当您拖动或缩放地图时它们会移动。
您可以简单地使用定位来做到这一点。请提供基本代码来处理
我在我的网站link 上进行了设计的第一阶段，我想做的是在接待区上放置一个覆盖 div，但我要留在这个位置，像标记一样移动地图时。因此，如果您将地图拖离该区域，您将无法看到 div。

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

【解决方案1】：

您可以在此处使用 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 重新计算 div 的位置，但我不知道该怎么做。