javascript - 使我的谷歌地图的宽度响应

Question

我一直在寻找正确的答案，但找不到。

我有一个 google maps API，当我增大浏览器宽度时，我会尝试做出响应。

在我的 javascript 中，我有这段代码可以与我的 HTML DIV 交互

  ui.map = new google.maps.Map(document.getElementById("map_canvas"), mapParams);
    ui.bounds = new google.maps.LatLngBounds();

    google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);

我的 HTML:

<div id="map_canvas" class="map"></div>

我的 CSS 响应代码:

@media screen and (min-width: 800px) {
#map_canvas {
margin:0 auto; height:600px; min-width:450px; max-width:750px; float:right;

问题是我的谷歌地图停留在 450px.. 有谁知道为什么我的浏览器宽度变大时我的谷歌地图没有变大？

Answer 1

您需要使 css 中 #map_canvas 的 width 等于 100%。这样它就会相对于父容器的宽度进行拉伸(stretch)。如果在调整浏览器大小时达到这些限制，它仍会遵守 min-width 和 max-width 属性。