0

我正在加载谷歌地图。html是：

    <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

    <style type="text/css">
       html, body, #map-canvas {
           margin: 0;
           padding: 0;
           height: 100%;
    }


</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&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>
</head

<body>

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

这显示正常。但是，如果我将地图画布 div 包装在一个 div 中，则不会显示任何内容！

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

我可以在萤火虫中看到谷歌地图 html 被渲染但什么都看不到......

4

2 回答 2

1

为了能够显示高度设置为 100% 的地图，所有父标签的高度都必须设置为 100%。

话虽如此，地图的父 div 高度也需要为 100%。

html, body, #map-canvas, #map_container {
   margin: 0;
   padding: 0;
   height: 100%;
}

以及地图和 div 的代码

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

在此之后，一切都应该正常工作。

于 2013-11-07T14:43:10.963 回答
0

尝试将直接删除外部<div>标签

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

像上面那样放

于 2013-11-07T14:42:32.190 回答