在Twitter的Div折叠Bootstrap

我想通过Bootstrap将Google Map添加到2列网格。然而，我遇到了一个问题，即地图所在的列已经'折叠'了，所以我只能看到应该嵌入的地图的顶部。我已经尝试在100％高度设置html和body元素，然后设置地图以30％为单位的div，但没有运气。我错过了什么吗？下面的代码...在Twitter的Div折叠Bootstrap

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Basic Bootstrap Template</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional Bootstrap theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<style> 
    html{height:100%;} 
    body{height:100%;} 
    #map{height:30%;} 
</style> 
</head> 
<body> 
    <div class="container"> 
     <div class="page-header"> 
      <h1>Testing</h1> 
     </div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <form> 
        <input type="range" name="points" min="0" max="1000"> 
       </form> 
      </div> 
      <div id ="map" class="col-md-9"> 
      </div> 
     </div> 
    </div> 
     <script> 
      var map; 
      var mapDiv = document.getElementById('map'); 

      var placesMap = { 
       belfast: { 
        center:{lat: 54.605035, lng:-5.832087}, 
        population:50000 
       }, 
       lisburn: { 
        center:{lat: 54.516246, lng:-6.058010599999989}, 
        population:40000 
       }, 
       portadown: { 
        center:{lat: 54.420333, lng:-6.454839}, 
        population:30000 
       }, 
       bangor: { 
        center:{lat: 54.643786, lng:-5.624201}, 
        population:20000 
       } 
      }; 

      //Called on page load by callback attribute in Google Maps API script source 
      function initMap() { 
       map = new google.maps.Map(mapDiv, { 
         center:{lat:54.605035,lng:-5.832087}, 
         zoom:8 
        }); 

       for (place in placesMap) { 
        var placeCircle = new google.maps.Circle({ 
         strokeColor: '#FF0000', 
         strokeOpacity: 0.8, 
         strokeWeight: 2, 
         fillColor: '#FF0000', 
         fillOpacity: 0.35, 
         map: map, 
         center:placesMap[place].center, 
         radius: Math.sqrt(placesMap[place].population) * 100 
        }); 
       } 
      } 
     </script> 
<!-- Google api script --> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKeyRemoved&callback=initMap"></script> 

</body> 
</html>

来源

2016-08-05 Dean Roulston

我不能运行的代码示例，它thows关于无效键错误。但是，无论如何。我记得几个月前有类似的问题，我认为这是由地图的比例造成的。尝试维持一个标准的谷歌地图比例宽度和高度，让我们看看会发生什么。 –

使用此为您解决问题

#map{height:250px;}

来源

2016-08-05 15:13:47 XSDesings

谢谢。这很有效，但如果可能的话，我试图保持设备响应的百分比设置。 –

#map { height：250px; 身高：calc（100％-255px）; } Asi lo he probado desde mi movil y funciona！ :) – XSDesings

哈哈！ Muchos Gracias！ –

在Twitter的Div折叠Bootstrap

回答

相关问题