Question

我正在尝试显示谷歌地图，并在另一个div元素旁边显示一个表单。

代码与Firefox和Chrome完美配合，但在IE 8中，它不会显示Google地图。

<html>
<head>
<script type ="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
height:100%;
}
p, h1, form, button{border:0; margin:0; padding:0;}

.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:350px;
padding:6px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:120px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:120px;
}
#stylized select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:180px;
margin:2px 0 20px 10px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:180px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:120px;
width:120px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
</style>
<script type="text/javascript">
      var myMap, myCenter, myVessel, myInfo;
      var markers = new Array();
      var temperatureData = new Array();
      var current = 0;


/*      window.createMap = function () {
         DoCreateMap();
         window.showMap();
      };

      window.showMap = function () {
         google.maps.event.trigger(myMap, 'resize');
         myMap.setCenter(myCenter);
         myInfo.open(myMap, myVessel);
      };

      $(document).ready(function () {
         if (null == myMap) {
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.src = "https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true&callback=createMap";
      $("head").append(s);
      } else {
            window.showMap();
      }
      });
*/
      function DoCreateMap() {
        myCenter = new google.maps.LatLng(52.381450, 4.663004);
        //myCenter = new google.maps.LatLng(9.1105671, -79.695602);
        var myOptions = {zoom: 5,
                        center: myCenter,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
        myMap = new google.maps.Map(document.getElementById("vesselmap"), myOptions);
      }


   </script>
</head>
<body onload="DoCreateMap();">
<div id="container" style="overflow:hidden;width:100%;height:75%;">
  <div id="inner" style="overflow:hidden;width:100%;">
     <div id="vesselmap" style="float:left;width:70%;height:75%;display:block;">
     </div>
     <div style="float:left;width:30%;height:75%;">
        <div id="stylized" class="myform">
            <h1>Route with Temperature</h1>
            <p>See Maximum and Minimum Temperature on a route.</p>
            <label>Source Port
            <span class="small">Select Starting Port</span>
            </label>
            <select name="source_port" id="source_port">
                <option value="Rotterdam, Netherland">Rotterdam, Netherland</option>
            </select>
            <label>Destination Port
            <span class="small">Select Destination Port</span>
            </label>
            <select name="dest_port" id="dest_port">
                <option value="Bangkok, Thailand">Bangkok, Thailand</option>
            </select>
            <label>Date
            <span class="small">Select Date of Journey</span>
            </label>
            <input type="text" id="datepicker" />
            <button type="submit" id="submit">See Route</button>
        </div>
     </div>
</div>
</div>

</body>
</html>

我没有收到任何javascript错误。我甚至验证了CSS并且在那里没有问题。请帮忙。

Answer 1

这是因为您为地图div提供了height:75%，但其父<div id="inner"没有高度属性。

为div id='inner'（％或px）指定一个高度值，它应该有效。

谷歌地图不会在IE中显示

1 个答案: