全尺寸谷歌地圖不適合屏幕尺寸

我們正在構建一個包含所有主頁的谷歌地圖的網絡應用程序。它看起來不錯，但當我在另一臺電腦上打開它時，分辨率或屏幕尺寸略有不同，地圖尺寸也不會相應更改。全尺寸谷歌地圖不適合屏幕尺寸

我嘗試使用「％」而不是「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>

這裏是在我的設備上看起來如何，當其他人看起來完全適合時的圖像：

來源

2015-12-21 Yaros

你可以發佈你的html嗎？ –

我一直在爲自己努力，希望你會找到某種解決方案。 – GroundIns

我只是解決了它，你需要更改爲：

height: 100vh;

，並讓這些如下更改：

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

希望能夠幫助您儘可能多的它幫助我。

來源

2015-12-21 20:10:52 GroundIns

您可以使用絕對定位來適合整個容器瀏覽器電子邊緣：

標記

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

CSS

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

來源

2015-12-21 12:36:24 Trix

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

height: 100vh;

來源

2015-12-21 12:40:07 AnTSaSk

這給你一個全屏地圖佈局。父項設置爲相對，則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>

來源

2015-12-21 12:41:27

它看起來像你的問題是這樣的CSS：

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

如果刪除，你可以用百分比來調整（或VH/vw sizing）

proof of concept fiddle

來源

2015-12-21 17:17:35 geocodezip

全尺寸谷歌地圖不適合屏幕尺寸

回答

相關問題