Javascript 当点击按钮时，谷歌地图并没有覆盖整个屏幕_Javascript_Jquery_Html_Google Maps_Background Size

Javascript 当点击按钮时，谷歌地图并没有覆盖整个屏幕

javascript jquery html google-maps

Javascript 当点击按钮时，谷歌地图并没有覆盖整个屏幕,javascript,jquery,html,google-maps,background-size,Javascript,Jquery,Html,Google Maps,Background Size,守则： <!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;

守则：

<!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>


谷歌地图
#钮扣{
外观：无；
-moz外观：无；
-webkit外观：无；
高度：50px；
宽度：150px；
左：50%；
最高：50%；
位置：绝对位置；
利润上限：-25px；
左边距：-75px；
边界半径：5px；
颜色：白色；
背景色：#4081FB；
字号：18px；
边框：实心1px#4081FB；
}
#按钮：悬停{
光标：指针；
}
#地图{
显示：无；
位置：绝对位置；
背景尺寸：封面；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
}
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“地图”）.fadeIn（“慢”）；
});
});

我不确定当我点击按钮时，为什么谷歌地图iframe没有覆盖整个屏幕。我已将iframe设置为背景大小：封面；一旦我点击按钮，就可以覆盖整个屏幕。有人能帮我吗？谢谢。

您需要在#地图上添加高度，并更改iframe上的内联css

在地图上添加高度/宽度（100vh，100vw）
在

//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>

您需要在#地图上添加高度，并更改iframe上的内联css

在地图上添加高度/宽度（100vh，100vw）
在

//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>

正如约旦所回答的那样

您需要允许

#map

在屏幕上传播，所以请给出它

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

然后使iframe分布在

#map

div上，这样iframe代码将是：

width=“100%”height=“100%”

替换

width=“600”height=“450”

此外，在结尾处，您可以删除

#div

之外的空白，您可以在正文中添加零边距

body { margin:0; }