不断调整谷歌地图的大小

Posted 2023-03-06

【中文标题】不断调整谷歌地图的大小

【英文标题】：Resize google map continouosly

【发布时间】：2011-11-05 08:45:41

【问题描述】：

我正在使用 Google Map Api v3。我使用以下 JQuery 设置地图 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 结合起来工作。

谢谢。

【参考方案1】：

使用.resize:

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

【讨论】：

谢谢。它对我不起作用。我也失去了我的初始身高。当我尝试使用 alert(mapHeight) 输出 mapHeight var 来检查值时，没有任何反应。

不应该是$(window).height()而不是document吗？

【参考方案2】：

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

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

【讨论】：

再次感谢特洛特。我假设我必须在你的 CSS 中使用一些 javascript 才能使地图的高度达到 100%-120px。只是隐藏溢出就可以了，只是它会切断 Google 徽标和位于地图底部的控件。