Question

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

<!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>

Answer 1

用此来解决您的问题

#map{height:250px;}

Twitter Bootstrap中的Div崩溃

1 个答案: