Question

我查看了其他几个主题。当代码执行时，您可以通过“Inspect Element”/源代码看到它正常工作并正常运行，但它只显示一个空白屏幕。我觉得它与CSS有关，但我在谷歌地图api介绍的“入门”部分完成了他们所有的CSS要求。

代码：

<div id="map-canvas"></div>



<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API-KEY&sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

当然，API-KEY替换为我的密钥，因为它有效，所以工作正常。

然后我的CSS：

html { height: 100%: ;}
body {
    background: #f5f5f5;
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    line-height: 140%;
    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map-canvas { height: 100%; width: 100%; }

任何帮助将不胜感激！谢谢！

Answer 1

我的CSS中有错误（如果你看到html {}，它也有一个分号和一个冒号。

我还必须确保父div的高度也是100％。

Google Maps API v3可以使用，但是空白

1 个答案: