我加载了 Google Maps API v3 并在div. 但是当将宽度和高度设置为 100% 和自动时，我看不到地图。
这是 HTML 代码片段。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法解决这个问题？
问问题
192193 次
12 回答
70
如果你想用它覆盖整个页面，你必须将所有父容器设置为 100% 宽度。您至少必须为#content div 设置宽度和高度的绝对值。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
于 2012-04-18T13:14:46.200 回答
45
将地图容器设置为相对位置就可以了。这是HTML。
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
和简单的CSS。
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
在所有浏览器上测试。这是屏幕截图。
于 2013-08-09T12:56:32.573 回答
39
很少有人意识到 css 定位的威力。要将地图设置为占据其父容器的 100% 高度，请执行以下操作：
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
如果您在#map_canvas_container 中有任何非绝对定位的元素，它们将设置它的高度，并且地图将占用确切的可用空间。
于 2014-10-08T14:58:23.347 回答
2
这对我有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
于 2018-01-03T08:02:57.903 回答
2
如果您不能影响您的父元素（例如在嵌套组件的情况下），您可以使用height: 100vh它将使其成为一个完整的窗口（=视图）高度；
于 2018-10-25T20:58:01.767 回答
1
您可以将高度设置为 -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
于 2017-08-30T09:26:22.417 回答
0
Gmap 将内联样式位置写入相对于 div 的位置。用以下内容覆盖：
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
希望能帮助到你。
于 2013-02-18T11:01:11.093 回答
-2
迟到总比不到好！我给我上了一个课：
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
进而
<div id="map" class="map"></div>
于 2019-04-15T22:15:37.453 回答
-3
如果这div是您页面上唯一的内容，请设置：
body, html {
height: 100%;
width: 100%;
}
于 2012-04-18T12:54:17.957 回答
-3
我费了很大劲才找到答案。
你真的不需要对体型做任何事情。您只需从地图代码中删除内联样式：
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
删除所有内联样式并添加类或 ID，然后按照您喜欢的方式对其进行样式设置。
于 2013-10-01T13:24:19.163 回答
-5
这对我有用。
map_canvas {位置：绝对；顶部：0；右：0；底部：0；左：0；}
于 2015-09-14T07:56:32.017 回答
-6
我刚刚添加了内联样式。
<div id="map_canvas" style="width:750px;height:484px;"></div>
它对我有用。
于 2013-11-11T09:45:37.920 回答