设置Google Maps Container DIV宽度和高度100%
设置Google Maps Container DIV宽度和高度100%
提问于 2012-04-18 20:49:11
我在div中加载了Google Maps API v3并打印了Google Map。但是当宽度和高度设置为100%和自动时，我看不到贴图。
下面是HTML代码片段。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>有没有办法解决这个问题？
回答 10
Stack Overflow用户
回答已采纳
发布于 2012-04-18 21:14:46
如果你想覆盖整个页面，你必须将所有的父容器设置为100%的宽度。你必须至少为#content div设置一个宽度和高度的绝对值。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}Stack Overflow用户
发布于 2018-01-03 16:02:58
这对我很有效。
<!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>Stack Overflow用户
发布于 2018-10-26 04:58:02
如果你不能影响你的父元素(比如在嵌套组件的情况下)，你可以使用height: 100vh，这将使它成为一个完整的窗口(=视图)高度；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10209704
复制相关文章
相似问题