有一个div与googlemaps api地图画布和div背景img，有麻烦显示图像

Question

我在一个网站上有一个div，我正在研究其中包含一个谷歌地图地图画布，在它上面，我试图显示一个图像作为一个div的背景图像。但是，除非我明确提供背景图像的尺寸，例如宽度:300px;身高:200 px;它根本不会显示，如果我试图给图像div相对尺寸，似乎地图画布会自动显示在它上面。

这里有一个jfiddle: http://jsfiddle.net/46andtool/vq2pf/1/我将背景设置为灰色，这样您就可以看到地图画布和图像如何离开父div。这里是div容器和地图画布和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的信息:点击这里

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

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

希望对你有帮助