我在div
中加载了Google Maps API v3并打印了Google Map。但是当宽度和高度设置为100%和自动时,我看不到贴图。
下面是HTML代码片段。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法解决这个问题?
发布于 2012-04-18 21:14:46
如果你想覆盖整个页面,你必须将所有的父容器设置为100%的宽度。你必须至少为#content div设置一个宽度和高度的绝对值。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
发布于 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>
发布于 2018-10-26 04:58:02
如果你不能影响你的父元素(比如在嵌套组件的情况下),你可以使用height: 100vh
,这将使它成为一个完整的窗口(=视图)高度;
https://stackoverflow.com/questions/10209704
复制相似问题