css - 有一个带有 google maps api map Canvas 和 div 背景 img 的 div，无法显示图像

Question

我在我正在处理的网站上有一个 div，其中包含一个 google maps map Canvas ，在它上面我试图将图像显示为带有背景图像的 div。但是，除非我明确提供背景图像的尺寸 a.g.宽度:300px；高度:200px；它根本不会显示，如果我尝试给图像 div 相对尺寸， map Canvas 似乎会自动显示在它上面。

这是一个 fiddle :http://jsfiddle.net/46andtool/vq2pf/1/我将背景设为灰色，以便您可以看到 map Canvas 和图像如何离开父 div。下面是 div 容器和 map Canvas 以及 div 图像的代码:

<div id="rightside">
 <h1>Where To Find Us</h1>
 <a href="img/buildingpic.jpg"><div id="buildingpic"></div></a>
 <br>   
  <div id="map_canvas">
        <script>
            function initialize() {

                var myLatlng = new google.maps.LatLng(39.960478, -75.603013);
                var mapOptions = {
                center: myLatlng,
                zoom: 19,
                mapTypeControl: true,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                zoomControl: true,
                zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions, marker);

                var marker = new google.maps.Marker({
                position: myLatlng,
                 map: map
                });
             }

          google.maps.event.addDomListener(window, 'load', initialize);
     </script>
</div> 
 <p id="location">information for business<br> address <br> and <br> telephone number</p>
</div>
</div>

继承人的CSS:

#rightside {
width: 20%;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 5px 8px 10px;
border: none;
}

#rightside h1 {
 width: 90%;
 margin: 8px auto ;
 background: #FF0000;
 box-shadow: 1px 1px 1px #888888;
 text-shadow: #CCC 1px 1px 1px;
 font-size: 1.35em; 
 padding: 10px 2%;
 color: #FFFFFF; 

}

#buildingpic {
background-image: url(../img/buildingpicresize.jpg);
display: inline-block;
width: 300px;
height: 200px;
margin: 0 auto;
margin-top: 5px;
border-radius: 1px;
border: 1px 1px 1px 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px rgba(20, 20, 20, 0.2);
}

#location {
color: #878787;
font-weight: bold;
}

#map_canvas { 
display: block; 
width: 300px; 
height: 300px; 
padding: 10px; 
margin: 5px; 
padding-bottom:15px; 
background-color: #CCC; 
border-radius: 1px;
border: 1px 1px 1px 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.2);
}

/* overrides the css max-width 100% browser reset("normalizer") otherwise googlemaps zoom in/out buttons dont display properly*/
#map_canvas img{
max-width: none;
}

Answer 1

我看不到完整的代码，但是在你的 css 文件中你从不使用 z-index 属性。我可以告诉你这是可能的。这是一个链接，您可以在其中找到有关 z-index 的更多信息:klick here

这是一个例子:http://jsfiddle.net/x8dSP/2841/

z-index: 2; // allows to draw over the map

希望对你有帮助