全尺寸谷歌地图不适合屏幕尺寸答案

【问题标题】：full size Google map doesn't fit to screen size全尺寸谷歌地图不适合屏幕尺寸
【发布时间】：2015-12-21 12:30:54
【问题描述】：

我们正在使用覆盖所有主页的谷歌地图构建一个网络应用程序。它看起来不错，但是当我在另一台计算机上打开它时，分辨率或屏幕尺寸略有不同，地图大小不会相应改变。

我尝试使用“%”而不是“px”，但情况更糟，地图消失了。

我找到了一些使用“！important”的解决方案，但它对我不起作用，不知道为什么。

这是我的地图 CSS（层叠样式表）：

#google-container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #e7eaf0;
}

@media only screen and (min-width: 768px) {
    #google-container {
        height: 300px;
    }
}

@media only screen and (min-width: 1170px) {
    #google-container {
        height: 710px;
    }
}

#cd-google-map {
    position: relative;
}

#cd-google-map address {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1em 1em;
    background-color: rgba(211, 104, 104, 0.9);
    color: white;
    font-size: 13px;
    font-size: 0.8125rem;
}

@media only screen and (min-width: 768px) {
    #cd-google-map address {
        font-size: 15px;
        font-size: 0.9375rem;
        text-align: center;
    }
}

这是我的 html（地图正在 main.js 文件中构建）：

<section id="cd-google-map">
    <div id="google-container"></div>
    <div id="cd-zoom-in"></div>
    <div id="cd-zoom-out"></div>
    <div id="addNewReviewButton" ng-controller="NavCtrl">
        <button style="border-color: transparent; background-color: transparent;">
            <ng-md-icon icon="add_circle" style="fill: #d43f3a" size="120" ng-click="addNewReview()"></ng-md-icon>
        </button>
    </div>
</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAl8UrwCupLjkdVfx_IXugrryC8ES32Cz8&language=iw&?v=3.exp&sensor=false&libraries=places"></script>
<script src="js/main.js"></script>

这是它在我的设备上的外观图片，而在其他设备上则完美契合：

【问题讨论】：

你也可以发布你的html吗？
我自己也在为此苦苦挣扎，希望您能找到某种解决方案。

标签： css google-maps google-maps-api-3 screen-resolution

【解决方案1】：

您可以使用 vw（视口宽度）和 vh（视口高度）代替 % 喜欢：

height: 100vh;

【讨论】：

【解决方案2】：

看起来你的问题是这个 CSS：

@media only screen and (min-width: 768px) {
  #google-container {
    height: 300px;
  }
}

如果你删除它，你可以使用百分比大小（或 vh/vw 大小）

proof of concept fiddle

【讨论】：

【解决方案3】：

我刚刚解决了，你需要改成：

height: 100vh;

并进行以下更改：

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
</style>

希望对你有帮助，对我也有帮助。

【讨论】：

只是替换高度：400px；高度：50vh；为我工作。现在我的页面适合移动设备屏幕。谢谢。

【解决方案4】：

您可以使用绝对定位使整个容器适应浏览器的边缘：

标记

<div class="map">
     the map is here ...
</div>

CSS

.map{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

【讨论】：

【解决方案5】：

这为您提供了全屏地图布局。 parent 设置为相对，则 IFRAME 被视为具有 position:absolute 值的该父级的子级。

padding-bottom: (height*100)/width;

例如：

padding-bottom: 56.22% /*(768*100)/1366) - common screen resolution.*/

.table {
  width: 100%;
  height: 100%;
  position: relative;
}
iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 100%;
  padding-bottom: 56.22%;
}

<div class="parent">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3774.2135216027964!2d72.83238461524519!3d18.921940761713312!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7d1c73993eebd%3A0x9e8c8bfbd74a913a!2sGateway+of+India%2C+Apollo+Bandar%2C+Colaba%2C+Mumbai%2C+Maharashtra+400001!5e0!3m2!1sen!2sin!4v1450701184011"
  frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

【讨论】：