时间戳

首页 > 解决方案 > 动态调整地图大小？

html - 动态调整地图大小？

问题描述

我的应用程序中有一张地图，我希望在窗口调整为更小/更大时调整它的大小。这只是一个基本的应用程序，但地图的大小让我无法调整大小，我无法让它动态改变。如何更改它以使其根据窗口大小调整大小？

<template>
  <div class="Home">
    <h1>{{ msg }}</h1>
    <div class="top-bar">
      <div class="large-menu">    
          <button @click="$router.push('about')">Home</button>
          <button @click="$router.push('about')">Drowsiness</button>
          <button @click="$router.push('about')">SOS</button>
          <button @click="$router.push('about')">Map</button>
          <button @click="$router.push('about')">Drivers</button>
          <button @click="$router.push('about')">Data</button>
      </div>
      <div class="small-menu">
        <form>
          <select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
              <option value="#home">Home</option>
              <option value="#drowsiness">Drowsiness</option>
              <option value="#sos">SOS</option>
              <option value="#map">Map</option>
              <option value="#drivers">Drivers</option>
              <option value="#data">Data</option>
          </select>
        </form>
      </div>
    </div>

    <div class="main-page">
      <div class="greeting-wrapper">

          <p class="p1">
            Welcome to AutoSentinel
          </p><br>
          <p class="p2">
            Where driving meets safety
          </p>

          <div class="map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2964.9888949227957!2d-87.81797538455504!3d42.0005138792127!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fb63b7755aae1%3A0x4a77c1865fe64ca0!2sPanoskin!5e0!3m2!1sen!2sus!4v1608611108029!5m2!1sen!2sus" width="650" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
          </div>
      </div>

        <div class="driver-photo">
          <img src="../assets/MicrosoftTeams-image.png" width="300px" height="600px">
        </div>
    </div>
  </div>
</template>


.top-bar{
  height: 125px;
  background-color: #8b1be6;
  color: black;
  box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px #d4d3d3;
}

h1{
  background-color:#8b1be6;
  font-size: 90px;
  font-weight: bold;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0px;
  letter-spacing: 0.3em;
}


.large-menu{
  margin-top: 0px;
  padding-top: 30px;
  display: flex;
  justify-content: space-evenly;
}

.main-page{
  font-size: 40px;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-image: url("../assets/backgroundline.png");
  background-repeat: no-repeat;
  background-size: 100%;
}


.map{
  padding-top: 30px;
  padding-left: 15px;
}

.p1 {
  margin-left: 20px
}

.p2 {
  margin-top: -40px;
  margin-left: 105px;
}

button {
   background-color: white;
    border: none;
    border-radius: 25px;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 30px;
    outline: none;
    cursor: pointer;
}

.driver-photo {
    padding-right: 70px;
    padding-top: 30px;
}

@media screen and ( max-width: 600px ) {
h1{
  font-size: 30px;
}

.main-page {
  background-image: none;
  display: flex;
  flex-direction: column;
}
.small-menu { display:flex;
  justify-content: center;
  align-items: center;

}
.large-menu { display:none; }
}
@media screen and ( min-width: 601px ) and ( max-width: 1024px ) {
.small-menu { display:none; }
.large-menu { display:inline; 
  display: flex;
  flex: space-evenly;
}

}
@media screen and ( min-width: 1280px ) {
.small-menu { display:none; }
.large-menu { display:inline; 
display:flex;
justify-content: space-evenly;
}
}

</style>

其他一切正常，但地图拒绝调整到窗口的尺寸。

标签： htmlcssvue.js

解决方案

我的猜测是，您需要在 CSS 中明确设置 iframe 的宽度，例如：

.map { width: /* here your actual width in px */ }
.map iframe { width: 100%; } /* so it's always 100% of the parent */

但是请注意，iframe 的高度永远不会自动适应并保持比例。所以你需要自己设置另一个高度。

因此，您可能还想执行以下操作：

@media (my breakpoint A) {
  .map iframe { width: XX; height: XX } /* fixed with and height for this break point */
}

@media (my breakpoint B) {
  .map iframe { width: XX; height: XX } /* fixed with and height for this break point */
}

@media (my breakpoint C) {
  .map iframe { width: XX; height: XX } /* fixed with and height for this break point */
}

推荐阅读