mat*_*tia 4 html css maps google-maps google-maps-api-3
是否有可能使谷歌地图高度100%的父div？我注意到,当高度为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>
任何的想法？
参考:Mike Williams的Google Maps Javascript API v2教程页面:使用地图div的百分比高度
如果您尝试在地图div上使用style ="width:100%; height:100%",则会得到一个高度为零的地图div.这是因为div试图成为其大小的百分比
<body>,但默认情况下<body>具有不确定的高度.有几种方法可以确定屏幕的高度,并使用该像素数作为地图div的高度,但一个简单的替代方法是更改它,使其高度为页面的100%.我们可以通过将style ="height:100%"应用于<body>和<html>.(我们必须对两者都这样做,否则<body>尝试是文档高度的100%,并且默认值是不确定的高度.)
代码段:
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
}<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>