Question

我正在努力创建一个全屏半透明叠加层，当在Google地图上打开信息窗口时会显示该叠加层（以使地图变暗）。

html：

<div id="infobox_wrapper">
<div id="map_overlay">
<div id="infobox">
<div id="marker1">
<div id="infobox_title_wrapper">
<div id="info_icon_stream">
<img src="green_s.png"/>
</div>
<div id="info_title"><p>##</p>
</div>
</div>
<iframe width="800" height="450" src="##" frameborder="0" allowfullscreen></iframe>
<p class= "txt">##</p>
</div> 
</div>
</div>
</div>

css：

#infobox_wrapper {
display: none;
width: 2880px;
height: 1800px;
z-index: 9999;
}

#map_overlay {
position: fixed; 
background: black;
height: 100%;
width: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-animation: fadeIn 300ms; /* Chrome, Safari, Opera */
animation: fadeIn 500ms;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6; 
z-index: -100;
}

#infobox {
position: relative;
line-height: 12pt;
margin-top: 8px;
padding: 1em;
background-color: #374c5d;
color: #FFF;
margin: 1px;
width: 800px;
z-index: 99999;
}

jQuery：

var infobox = new InfoBox({
     content: document.getElementById('map_overlay'),
     disableAutoPan: false,
     maxWidth: 2880,
     pixelOffset: new google.maps.Size(-400, 10),
     zIndex: null,
    closeBoxMargin: "12px 12px 2px 2px",
    closeBoxURL: "icon-close.png",
    infoBoxClearance: new google.maps.Size(0, 0),
});

google.maps.event.addListener(marker1, 'click', function() {
    infobox.open(map, this);
    map.panTo(marker1.getPosition(0, 427));
    map.panBy(0, 390);
});

我已尝试过所有不同的组合，但还没有让所有东西都变得半透明，包括infowindow和搞乱布局。或者，单击标记时，infowindow不会打开。我认为以某种方式放置＆＃34; map_overlay＆＃34;在最后一个结束div之前的底部div，但是没有选项用＆＃34; getElementById＆＃34;来调用div。非常感谢。

Google地图信息窗口采用全屏透明覆盖

0 个答案: