Question

我正在加载谷歌地图。 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>

这显示正常。但是，如果我将map-canvas div包装在div中，则不会显示任何内容！

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

我可以在firebug中看到谷歌地图html被渲染但没有任何东西可见......

Answer 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>

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

Answer 2

尝试直接删除<div>标记

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

如上所述

谷歌地图渲染，但不包括在div中显示

2 个答案: