将 Google Maps Container DIV 宽度和高度设置为 100%
Posted
技术标签:
【中文标题】将 Google Maps Container DIV 宽度和高度设置为 100%【英文标题】:Set Google Maps Container DIV width and height 100% 【发布时间】:2012-04-29 21:11:38 【问题描述】:我加载了 Google Maps API v3 并在 div
中打印 Google Map。但是当将宽度和高度设置为 100% 和自动时,我看不到地图。
这里是 html 代码 sn-p。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法解决这个问题?
【问题讨论】:
div#gmap_canvas 包含的元素的样式是什么? ` #contentbackground-color:#fff;border:solid 1px #a6a196;border-radius:4px;-moz-border-radius:4px;height:auto;溢出:隐藏;` 【参考方案1】:迟到总比不到好!我给我的课:
.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>
【讨论】:
【参考方案2】:如果您不能影响您的父元素(例如在嵌套组件的情况下),您可以使用 height: 100vh
这将使其成为一个完整的窗口 (=view) 高度;
【讨论】:
如果您使用网格布局怎么办?【参考方案3】:这项工作适合我。
<!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>
【讨论】:
哇,这个问题确实有效。非常感谢!【参考方案4】:您可以将高度设置为-webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
【讨论】:
【参考方案5】:这对我有用。
map_canvas 位置:绝对;顶部:0;右:0;底部:0;左:0;
【讨论】:
【参考方案6】:很少有人意识到 css 定位的威力。要将地图设置为占据其父容器的 100% 高度,请执行以下操作:
#map_canvas_container position: relative;
#map_canvas position: absolute; top: 0; right: 0; bottom: 0; left: 0;
如果您在#map_canvas_container 中有任何非绝对定位的元素,它们将设置它的高度,并且地图将占用确切的可用空间。
【讨论】:
非常有趣的技术。我从事网络开发已经有一段时间了,并没有意识到这一点。 太糟糕了,拒绝这个问题的人从来没有费心说“为什么?” ... 非常适合我 技术很棒。以前没用过,效果很好。【参考方案7】:我刚刚添加了内联样式。<div id="map_canvas" style="width:750px;height:484px;"></div>
它对我有用。
【讨论】:
【参考方案8】:我费了很大劲才找到答案。
你真的不需要对体型做任何事情。您只需要从地图代码中删除内联样式即可:
<iframe frameborder="0" scrolling="no" margin margin 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,然后按照您喜欢的方式设置样式。
【讨论】:
【参考方案9】:将地图容器设置为相对位置就可以了。这是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>
在所有浏览器上测试。这是屏幕截图。
【讨论】:
【参考方案10】:Gmap 将内联样式位置写入相对于 div 的位置。用:覆盖它:
google.maps.event.addListener(map, 'tilesloaded', function()
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
);
希望对你有帮助。
【讨论】:
【参考方案11】:如果你想用它覆盖整个页面,你必须将所有父容器设置为 100% 宽度。您至少必须为#content div 设置宽度和高度的绝对值。
body, html
height: 100%;
width: 100%;
div#content
width: 100%; height: 100%;
【讨论】:
如果我只希望地图出现在网站的一部分而不是 100% 怎么办? @Machiel @RainbowHat 只需在 CSS 中指定大小,从 div#content 更改宽度和高度。 明确地说,内容 div 中的每个父元素(在 OP 的代码中是#map-canvas,而不是#content)必须设置特定的宽度/高度,不管是相对的还是准确的。这样做,这个答案是正确的。【参考方案12】:如果 div
是您页面上唯一的内容,请设置:
body, html
height: 100%;
width: 100%;
【讨论】:
***.com/questions/13926371/…以上是关于将 Google Maps Container DIV 宽度和高度设置为 100%的主要内容,如果未能解决你的问题,请参考以下文章
点和线之间的最短距离(Google Maps API问题?)
点和线之间的最短距离(Google Maps API 问题?)