Question

是否有可能使谷歌地图高度为父div的100％？我注意到，当高度为100％时，地图不可见，但如果我以像素为单位添加div的高度，则地图可以正确显示。是否有一些技巧来实现100％父div的地图？这不起作用

<div class="block halfrect">
    <div id="map" style="height:100%;"></div>
</div>

这是有效的

    <div class="block halfrect">
        <div id="map" style="height:590px;"></div>
    </div>

任何想法？

Answer 1

reference: Mike Williams' Google Maps Javascript API v2 tutorial page: Using a percentage height for the map div

如果您尝试在地图div上使用style =“width：100％; height：100％”，则会得到一个高度为零的地图div。这是因为div试图成为<body>大小的百分比，但默认情况下<html>具有不确定的高度。有几种方法可以确定屏幕的高度，并使用该像素数作为地图div的高度，但一个简单的替代方法是更改它，使其高度为页面的100％。我们可以通过将style =“height：100％”应用于<body>和var map; function initialize() { var map = new google.maps.Map( document.getElementById("map"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); } google.maps.event.addDomListener(window, "load", initialize);来实现此目的。（我们必须对两者都这样做，否则html, body { height: 100%; width: 100%; margin: 0px; padding: 0px }会尝试100％的文档高度，并且默认值是不确定的高度。）

代码段

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
  <div id="map" style="height:100%;"></div>
</div>

{{1}}

{{1}}

谷歌地图高度100％div div

1 个答案: