【发布时间】：2019-02-01 10:37:49
【问题描述】：
我正在尝试使用 iframe 在网站中嵌入谷歌地图。显示地图时，我需要此地图在任何设备上全屏显示。我想不出办法做到这一点，尝试将宽度和高度设置为 100%，使其看起来像这样）： 但现在我的网站看起来像这样：
有什么方法可以让地图全屏显示？
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
【问题讨论】：
-
不是答案，但您可能更容易将谷歌地图嵌入页面而不是使用 iframe。
-
@Goose iframe 不是嵌入谷歌地图的方式吗？
-
@SuperDJ 这里演示了推荐的方式。 developers.google.com/maps/documentation/javascript/examples/… 最终结果是一个 iFrame，但是您有一个 JavaScript 对象，可用于控制有关嵌入地图的各个方面，而直接嵌入 iframe 时，您只能传递 URL 参数来控制地图。不确定这是否会帮助 OP 解决这个特定问题，但总的来说我建议使用这种方法。
-
@Goose 就是你使用 JS api 的时候。但是，在谷歌地图中，您可以选择嵌入地图，而谷歌会为您提供 iframe
标签： javascript html css