我正在尝试让谷歌地图响应并调整大小,同时在Windows调整大小时保持其中心.我读了其他堆栈问题,例如:
响应式谷歌地图?和中心谷歌地图(V3)在浏览器调整大小(响应)
从第二个堆栈问题我得到一个链接,帮助我部分代码,但我仍然没有运气.这是我正在使用的代码,当我调整窗口大小时,地图根本不会调整大小
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.5472,12.282715),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
Run Code Online (Sandbox Code Playgroud)
HTML
<div id="map-canvas"/>
Run Code Online (Sandbox Code Playgroud)
CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }
Run Code Online (Sandbox Code Playgroud)