Question

我有一个谷歌地图div，显示我以像素为单位定义高度但不是百分比;在我的例子中，我尝试将高度设置为100％。

我已经阅读了一些SOF答案，这些答案表明我必须设置父div高度，我可以通过定位css中所有地图的父div来完成，但是地图没有显示。有人可以帮忙吗？

以下是执行的代码：

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

html, body, #map-wrapper #map-canvas {
    margin: 0;
    padding: 0;
    height: 840px;
    width: 100%;  }

这是我的代码不工作：

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

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

的JavaScript ：

        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

请注意，对于100％的高度，您还需要将所有父元素也设置为100％高度。

在my fiddler ¹中，地图位于html - ＆gt;身体 - ＆gt; div＃map-wrapper - ＆gt; DIV＃地图画布。每个元素的高度必须为100％。

所以基本上我只是将map-wrapper div添加到你的css：

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

你现有的#map-wrapper #map-canvas css（注意缺少的逗号！）会遗漏周围的div。

¹我没有添加api密钥，因此您收到错误警告，并且为了调试我给地图一个红色背景。

谷歌地图没有显示在div中

1 个答案: