在Bootstrap行中为GoogleMaps设置CSS

Set CSS for GoogleMaps within Bootstrap row

本文关键字：GoogleMaps 设置 CSS Bootstrap      更新时间：2023-09-26

我有以下文档结构，但GoogleMap没有显示。当我不把它放在row col结构中使用bootstrap的网格系统时，它是有效的。我需要如何在CSS中描述我的类，以便它仍然被识别？我猜GISContainer不再具有正确的大小，因为它在col类中。

HTML

<div class="GISContainer" id="GISContainer">
    <div class="row">
        <div class="col-md-6">
            <div class="GISMap" v-el:map></div>
        </div>
        <div class="col-md-6">
            Test
        </div>
    </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
}
.PageWrapper {
  height: 100%;
  width: 100%;
}
.row, .col {
  height: 100%;
}
.GISContainer {
  width: 100%;
  height: 100%;
}
.GISMap {
  height: 100%;
  width: 100%;
  background-color: lightblue;
}

JS

function initGISMap(selector) {
    map = new google.maps.Map(selector, {
        zoom: 10,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    searchMarker = createMarker();
}

VUE

var Vue = require('vue');
import VueResource from 'vue-resource';
Vue.use(VueResource);
window.app = new Vue({
   el: '#GISContainer',
   data: {
      defaultMapLocation: 'Street'
   },
   methods: {
      init: function() {
         initGISMap(this.$els.map);
      }
   }
});

您已将.GISMap放入高度不是100%的容器（row、col）中，因此需要执行此操作。。

.row, .col-md-6 {
  height: 100%;
}

或使用.GISMap的特定高度，例如：

.GISMap {
  height: 500px;
  width: 100%;
  background-color: lightblue;
}

对于谷歌地图，如果你想100%使用高度，你必须将所有父容器设置为100%

然后还有

.row and .col 
 {
    height 100%;
 }
相关文章：