Javascript 让谷歌地图响应调整大小
可能重复:Javascript 让谷歌地图响应调整大小,javascript,html,css,google-maps-api-3,Javascript,Html,Css,Google Maps Api 3,可能重复: 所以通常使用JSAPI的谷歌地图看起来像这样 现在,如果我要刷新页面,打开开发人员工具,然后稍微放下开发人员工具,看起来是这样的 因此,我想知道如何让它在调整窗口大小时重新绘制控件和调整贴图大小。我在这里试过这个代码。但是不行 #map_canvas {width:100%;height:100%;position: absolute; top: 42px; left: 0; right: 0; bottom:0; z-index: 1; overflow: hidden;
所以通常使用JSAPI的谷歌地图看起来像这样 现在,如果我要刷新页面,打开开发人员工具,然后稍微放下开发人员工具,看起来是这样的 因此,我想知道如何让它在调整窗口大小时重新绘制控件和调整贴图大小。我在这里试过这个代码。但是不行
#map_canvas {width:100%;height:100%;position: absolute; top: 42px; left: 0; right: 0;
bottom:0; z-index: 1; overflow: hidden; }
发生window.onresize事件时,在#map_画布上设置样式属性:
window.onresize = function(event) {
var style = document.getElementById('map_canvas').style;
style.width = '100%';
style.height = '100%';
style.position = 'absolute';
style.top = '42px';
style.left = '0';
style.right = '0';
style.bottom = '0';
style.z-index = '0';
style.overflow = 'hidden';
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
}
考虑顶部42px的jQuery等价
window.onresize = function(event) {
var el = $("#map_canvas");
el.css("position", "absolute");
el.css("top", "42px");
el.css("left", "0px");
el.css("right", "0px");
el.css("bottom", "0px");
el.css("width", "100%");
el.css("height", $("body").height() - 42);
el.css("overflow", "hidden");
google.maps.event.trigger(Maps.map, 'resize');
Maps.map.setZoom(Maps.map.getZoom());
}
你几乎肯定也需要在地图上触发google.maps.Map resize事件。此外,它不考虑顶部栏。即使有42px,它也不适合页面。它被移下来了。但除此之外,这对我的网站不起作用