Question

我正在使用Google Map Api v3。我使用以下JQuery设置map div的高度：

$(document).ready(function() {
   var wHeight = $(document).height();
   var mapHeight = wHeight - 120;
   $("#map_canvas").css('height' , mapHeight);
  });

我在顶部有一个顶部条形div，这就是为什么我减去120像素并设置地图画布高度的原因。这在页面加载时工作正常，但是当我调整浏览器大小时，我无法调整地图大小，它保持不变。

我知道API中有一个resize事件：

  google.maps.event.trigger(map, "resize");

我只是不知道如何将该行与上面的JQuery结合使用。

感谢。

Answer 1

使用.resize：

$(window).resize(function() {
  var wHeight = $(document).height();
  var mapHeight = wHeight - 120;
  $("#map_canvas").css('height' , mapHeight);
});

Answer 2

我认为您可以使用以下CSS解决您的问题：

#map_canvas { position: absolute; top: 120px; left: 0; right: 0; bottom:0; z-index: 1; overflow: hidden; }

持续调整谷歌地图的大小

2 个答案: