谷歌地图调整与全屏不工作

Question

下面的代码运行正常

<div id="map_wrapper">
   <div id="map_canvas" class="mapping"></div>
</div>
<style>
  #map_wrapper {
    height: 750px;
  }
  #map_canvas {
    width: 100%;
    height: 100%;
  }
</style>

将#map_wrapper的含量由height: 750px调整为height: 100%时变为空白

我试过google.maps.event.trigger(map, 'resize');

我做错了什么?

Answer 1

你需要有一个父容器的大小(100%的0是0)

Mike Williams在Google Maps Javascript API v2教程中的解释

#map_wrapper {
    height: 100%;
}
html, body, #map_canvas {
    width: 100%;
    height: 100%;
}

概念验证

代码片段:

var geocoder;
var map;
function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
google.maps.event.addDomListener(window, "load", initialize);

#map_wrapper {
  height: 100%;
}
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_wrapper">
  <div id="map_canvas" class="mapping"></div>
</div>