javascript - 在 Bootstrap 行中为 GoogleMaps 设置 CSS

Question

我有以下文档结构，但没有显示 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);
      }
   }
});

Answer 1

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

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

或者为.GISMap使用特定的高度，例如:

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