1. 首页
  2. 问答
  3. 调整谷歌地图高度动态在行

调整谷歌地图高度动态在行

2016-02-03 32 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

相关问题

 相关问题