点击按钮时谷歌地图没有覆盖整个屏幕答案

【问题标题】：Google Maps is not covering the whole screen when clicked on button点击按钮时谷歌地图没有覆盖整个屏幕
【发布时间】：2015-08-29 22:56:27
【问题描述】：

代码：

<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#button {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
height: 50px;
width: 150px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -25px;
margin-left: -75px;
border-radius: 5px;
color: white;
background-color: #4081FB;
font-size: 18px;
border: solid 1px #4081FB;
}
#button:hover {
cursor: pointer;
}
#map {
display: none;
position: absolute;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button").click(function () {
$("#map").fadeIn("slow");
});
});
</script>
</head>
<body>
<input type="button" id="button" value="Open Map" />
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>

我不知道为什么当我点击按钮时 Google Maps iframe 没有覆盖整个屏幕。我已将 iframe 设置为 background-size: cover;一旦我点击了按钮，就可以覆盖整个屏幕。有人可以帮我弄这个吗？谢谢。

【问题讨论】：

标签： javascript jquery html google-maps background-size

【解决方案1】：

您需要在#map 上添加高度以及更改 iframe 上的内联 css。

在#map 上添加高度/宽度 (100vh,100vw)
在<iframe> 上更改内联 html 属性的高度/宽度 (100%,100%)

//HTML

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>

//CSS

#map {
    height: 100vh;
    width: 100vw;

    display: none;
    position: absolute;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

【讨论】：

【解决方案2】：

正如乔丹所回答的，

你需要让#map在屏幕上传播所以给它

   #map {
    height: 100%;
    width:100%; }

然后使 iframe 分布在 #map div 中，因此 iframe 代码将是：width="100%" height="100%" 替换 width="600" height="450"。

此外，最后您可以删除#div 之外的空格，您可以在正文中添加零边距。

body { margin:0; }

【讨论】：

【解决方案3】：

你只需要做三件事：

为您的身体指定width:100%;、height:100%; 和margin:0px;。

那么

为您的地图 div 指定 width:100%; 和 height:100%。

与

移除 iframe 的内嵌宽度和高度，并为您的 iframe 指定 min-width:100% 和 min-height:100%。

这是一个 jsfiddle 的变化：http://jsfiddle.net/65sf2f66/20/

这是使用 SO 的 sn-p 的代码：

$(document).ready(function () {
$("#button").click(function () {
$("#map").fadeIn("slow");
});
});

body  {
    width:100%;
    height:0%;
    margin:0px;
}
#button {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
height: 50px;
width: 150px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -25px;
margin-left: -75px;
border-radius: 5px;
color: white;
background-color: #4081FB;
font-size: 18px;
border: solid 1px #4081FB;
}
#button:hover {
cursor: pointer;
}
#map {
    height: 100%;
    width: 100%;
    display: none;
    position: absolute;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}
#map iframe {min-width:100%;min-height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="button" value="Open Map" />
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

【讨论】：