中心谷歌地图(V3)在浏览器调整大小(响应)

Question

我的页面中有一个Google地图(V3),页面宽度为100%,中间有一个标记.当我调整浏览器窗口的宽度时,我希望地图保持居中(响应).现在地图只停留在页面的左侧并变小.

更新完全按照duncan所描述的方式工作.这是最终的代码:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

Answer 1

窗口调整大小时需要有一个事件监听器.这对我有用(把它放在你的初始化函数中):

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

Answer 2

检测浏览器调整大小事件,调整Google地图的大小,同时保留中心点:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

通过其他方式调整google地图的大小时,您可以在其他事件处理程序中使用相同的代码(例如,使用jQuery-UI'可调整大小'控件).

来源:http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/为@smftre提供链接信用.

注意:此代码与@ smftre对已接受答案的评论相关联.我认为值得添加它作为自己的答案,因为它真的优于公认的答案.它不需要全局变量来跟踪中心点,也不需要事件处理程序来更新该变量.