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

问题描述：

我们正在构建一个包含所有主页的谷歌地图的网络应用程序。它看起来不错，但当我在另一台电脑上打开它时，分辨率或屏幕尺寸略有不同，地图尺寸也不会相应更改。全尺寸谷歌地图不适合屏幕尺寸

我尝试使用“％”而不是“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吗？ –

我一直在为自己努力，希望你会找到某种解决方案。 – GroundIns

答

我只是解决了它，你需要更改为：

height: 100vh;

，并让这些如下更改：

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

希望能够帮助您尽可能多的它帮助我。

答

您可以使用绝对定位来适合整个容器浏览器电子边缘：

标记

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

CSS

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

答

可以使用VW（视口宽度）和VH（视口的高度），而不是％像：

height: 100vh;

答

这给你一个全屏地图布局。父项设置为相对，则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>

答

它看起来像你的问题是这样的CSS：

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

如果删除，你可以用百分比来调整（或VH/vw sizing）

proof of concept fiddle

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

相关推荐