我将 Google Maps API 与 Bootstrap 3.3.7 结合使用。并且似乎无法找到将 map 实现到我的 col-md-6 中的有效解决方案。
问题是，我不能放
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
因为我使用的是固定导航栏，所以我需要填充。
如果 map 是导航栏之外唯一的东西，它就会显示在页面上
代码在这里:
<body>
<div class="outer">
<div class="top">
<div id="ukljuci"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6" id="contprvi">
some text just for demo.
</div>
<div class="clearfix visible-md"></div>
<div class="clearfix visible-md"></div>
<div class="col-md-6" id="contzadnji">
<div id="map" style="width: 100%; height: 100%"></div>
</div>
</div>
</div><!-- container-fluid -->
</div> <!-- top -->
</div> <!-- outer -->
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPdCPG3NTb-GtlywfSQaHMnMCjKnLB6rk&callback=initMap">
</script>
<script>
$( "#ukljuci" ).load( "izbornik_complete.php #nas_navbar" );
</script>
</body>
附言#contprvi 是将此容器放在屏幕左侧的自定义 css 此外，“ukljuci”是在我的其他页面上运行良好的代码
最佳答案
你需要设置固定高度
<div class="col-md-6" id="contzadnji">
<div id="map" style="width: 100%; height: 300px"></div>
</div>
关于javascript - Google Maps API 未显示引导元素和固定导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41386310/