javascript - Google Maps API 不在 DIV 标记内呈现

Question

我有一个使用 Google Maps API v3 的非常简单的 Google map ，它不会在 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>

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

Answer 1

block 元素(如 div)的工作方式是它占据其父元素的整个宽度，以及其相关子元素的最小高度。如果 block 元素的子元素将其高度设置为 100%，这几乎就像循环引用，但此行为将其设置为 0，除非它附加了硬数字。

要解决这个问题，您需要将其嵌套路径中所有 div 的高度设置为其父级的高度，以实现您想要完成的目标。如果您在浏览器的开发人员工具中使用 Inspect Element，您就会明白这意味着什么。

我创建了一个 JSFiddle 你可以玩，包括你的设置。此外，要初始化，您应该使用 google.maps.event.addDomListener 调用您的 initialize 函数，而不是直接调用它，因为您的浏览器将尝试异步加载脚本并且当它到达调用函数 initialize(); 时，API 可能还没有准备好。