Question

我有一个非常简单的使用Google Maps API v3的Google地图，它不会在div标签之间呈现。

CSS：

#mainContent {
background:#c8dbec url(//images.rigzone.com/images/background_body4.gif) 50% top repeat-y;
/*e0ecff c1daf0 e3ecf3*/
position: relative;
text-align: left;
}
* {
text-align: left;
 }
#content {
width: 935px;
margin:auto;
position: relative;
padding-left:0px;
padding-top:7px;
padding-bottom:10px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}

#mainBody {
float:right;
width:770px;
padding:0px 5px 0px 5px;
}

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:400px; }

HTML / JS：

<div id="mainContent">  
<div id="content">  
    <div id="mainBody">

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=myKeyID&libraries=weather">
        </script>
        <script type="text/javascript">
          var map
          function initialize() {
             var mapOptions = {
               center: new google.maps.LatLng(28.39404819, -91.38743867),
               zoom: 7,
               mapTypeId: google.maps.MapTypeId.HYBRID
             };
             map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);   
          }
        </script>                

        <div id="map_canvas" style="width:600px; height:50%"></div>

        <script>initialize();</script>    
    </div>
</div>

如果我删除地图周围的div标签，它可以正常工作，但我没有所需的格式。删除div也不是一个选项，因为它们在我们的页眉和页脚文件中是硬编码的。任何帮助表示赞赏。

Answer 1

块元素（如div）的工作方式是它占据了它的父元素的全宽，以及它的相对子元素的最小高度。如果一个块元素的孩子将它的高度设置为100％，它几乎就像是圆形引用，但是这种行为将此设置为0，除非它附加了一个硬编号。

要解决此问题，您需要在其嵌套路径中设置所有div的高度，并将其设置为其父级的高度，以实现您想要完成的任务。如果您在浏览器的开发者工具中使用检查元素，您将看到这意味着什么。

我已经创建了一个 JSFiddle ，您可以使用其中包含您的设置。此外，要初始化，您应该使用google.maps.event.addDomListener来调用initialize函数，而不是直接调用它，因为您的浏览器会尝试异步加载脚本，并且API可能尚未准备就绪到调用函数initialize();。

Answer 2

试试这个会起作用！将样式标记放在标题和div中。

<style>
 #_map {    
    height: 350px;   
    width: 900px;  
  }
</style>

 <div id="_map"></div>

Google Maps API无法在DIV标记内呈现

2 个答案: