1. 首頁
  2. 問答
  3. 調整谷歌地圖高度動態在行

調整谷歌地圖高度動態在行

2016-02-03 66 views
2

我有這個例子(click here)其中即時試圖使谷歌地圖的高度動態調整到旁邊的跨度。調整谷歌地圖高度動態在行

任何幫助非常感謝。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
    <style> 
 
     #map { 
 
     width: 500px; 
 
     height: 400px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="span8"> 
 
      <p>This is something dynamic and longer than the map.</p> 
 
      <p>I want the map to adapt to this span</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>MAP'S HEIGHT SHOULD BE LAST TILL HERE AND <b>NOT</b> SPECIFIED WITH <b>FIXED</b> HEIGHT</p> 
 
     </div> 
 
     <div class="span4"> 
 
      <div id="map"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script> 
 
     function initMap() { 
 
     var mapDiv = document.getElementById('map'); 
 
     var map = new google.maps.Map(mapDiv, { 
 
      center: {lat: 44.540, lng: -78.546}, 
 
      zoom: 8 
 
     }); 
 
     } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
     async defer></script> 
 
    </body> 
 
</html>

常見的解決方案是行不通的。

html, body{ 
    height: 100%; 
}

來源

2016-02-03 Alejandro Vales

回答

1

的研究和CSS令人沮喪的經驗，一些小時之後，我想這樣做是JavaScript的最好的方式，連接簡單得要命的例子。

（編輯）一個朋友給我通過CSS他的解決方案，連接在底部

var initialHtml = document.getElementById('prCol1').innerHTML; 
 

 
setInterval(function(){ 
 
    document.getElementById('prCol1').innerHTML += '<p>N/A</p>'; 
 
    var divh = document.getElementById('prCol1').offsetHeight; 
 
    document.getElementById('map').style.height = divh + 'px'; 
 
    google.maps.event.trigger(document.getElementById('map'),'resize'); 
 
}, 1000); 
 

 
setInterval(function(){ 
 
    document.getElementById('prCol1').innerHTML = initialHtml; 
 
    var divh = document.getElementById('prCol1').offsetHeight; 
 
    document.getElementById('map').style.height = divh + 'px'; 
 
    google.maps.event.trigger(document.getElementById('map'),'resize'); 
 
}, 5000);
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
    <style> 
 
     #map { 
 
     width: 500px; 
 
     height: 400px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="span8" id="prCol1"> 
 
      <p>This is something dynamic and longer than the map.</p> 
 
      <p>I want the map to adapt to this span</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>MAP'S HEIGHT SHOULD BE LAST TILL HERE AND <b>NOT</b> SPECIFIED WITH <b>FIXED</b> HEIGHT</p> 
 
     </div> 
 
     <div class="span4"> 
 
      <div id="map"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script> 
 
     function initMap() { 
 
     var mapDiv = document.getElementById('map'); 
 
     var map = new google.maps.Map(mapDiv, { 
 
      center: {lat: 44.540, lng: -78.546}, 
 
      zoom: 8 
 
     }); 
 
     } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
     async defer></script> 
 
    </body> 
 
</html>

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
    <style> 
 
     .table { 
 
     display:table; 
 
     height:100%; 
 
     } 
 
     .table-row { 
 
     display:table-row; 
 
     } 
 
     .table-cell { 
 
     display:table-cell; 
 
     width:40%; 
 
     height:100%; 
 
     vertical-align: top; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     width: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="table"> 
 
     <div class="table-row"> 
 
      <div class="table-cell"> 
 
      <p>This is something dynamic and longer than the map.</p> 
 
      <p>I want the map to adapt to this span</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>N/A</p> 
 
      <p>MAP'S HEIGHT SHOULD BE LAST TILL HERE AND <b>NOT</b> SPECIFIED WITH <b>FIXED</b> HEIGHT</p> 
 
      </div> 
 
      <div class="table-cell"> 
 
      <div id="map"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script> 
 
     function initMap() { 
 
     var mapDiv = document.getElementById('map'); 
 
     var map = new google.maps.Map(mapDiv, { 
 
      center: {lat: 44.540, lng: -78.546}, 
 
      zoom: 8 
 
     }); 
 
     } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
     async defer></script> 
 
    </body> 
 
</html>

來源

2016-02-03 16:24:53

相關問題

 相關問題