如何使全屏响应式iframe Google地图

时间：2018-08-26 20:27:52

标签： javascript html css

我正在尝试使用iframe将google地图嵌入网站中。显示地图时，我需要此地图在任何设备上全屏显示。我想不出一种方法，尝试将width和height设置为100％，使它看起来像这样）：enter image description here 但是现在我的网站看起来像这样： enter image description here

可以全屏显示地图吗？

$(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>

3 个答案:

答案 0 :(得分：0)

抱歉，我现在无法真正调整您的CSS，但是当我需要在iframe中输出YouTube视频时，我想到了一点。试试吧

<style>
       #mediaPlayer{
        position: relative;
        height: auto;
        padding-bottom: 56.25%;
        padding-top: 1.875em; 
        overflow: hidden;
        border: 0.1875em double #185875; 
        background-image:url('../video_loading.gif'); 
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: center;
        background-attachment: fixed;
        /*to adjust the height and width*/
        margin-right: 20%;
        margin-left: 20%;
        margin-top: 20%;
        margin-bottom: 20%;
        /*or you can use it in single line*/
        margin:20%;
        /*or if you want different margins for different sides in a single line*/
        margin: 20% 20% 20% 20%;
        /* the above means margin: top right bottom left; */
       }

    #mediaPlayer iframe{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;   
    }
</style>

/*instead of using margin just add a div and specify the exact height and width you want*/ 
<div style="height: 50%; width:50%;">
 <center>
  <div id="mediaPlayer">
    <iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
 </center>
</div>

video_loading.gif背景通常是一个不错的主意，对于网络速度较慢的用户，在您加载iframe内容时在背景中添加一些东西

但是您必须找到自己的唯一gif文件/图像并将其设置在background-image:url('../file-location-here.gif');

中

只用上面的代码替换您的<div class="box"></div>，让我知道结果如何。

答案 1 :(得分：0)

您是否正在寻找类似的东西？将以下代码添加到您的CSS中，看看它是否能解决问题。

iframe {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

使用viewport percentage

答案 2 :(得分：0)

下面的示例如何。解决方案来自Responsive iframe (google maps) and weird resizing。通过调整props: { 'settings': { type: Object, default: () => ({ landing_bg: { url: '' //here you can specify a default URL or leave it blank to just remove the error } }) }, }, 和padding-top，您可以更改大小。

padding-bottom
$(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');
    }
})
.box {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

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;
    }

}

您也可以尝试使用CSS变量：

<!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" allowfullscreen></iframe>


    </div>


    </div>

  </body>
</html>
$(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');
    }
})

let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');

events.forEach( event => {
  window.addEventListener(event, () => {
    googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
  });
});
.box {
  height: 100%;
}

.box iframe {
  width: 100%;
  height: var(--google-maps-height);
  border: none;
}

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;
    }

}

相关问题
最新问题