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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我有一个谷歌地图(V3)

在我的网页100%的网页宽度,一个标记在中间。当我调整浏览器窗口的宽度时,我希望地图保持居中(响应)。现在,地图只停留在页面的左边,然后变得更小。

最终代码:

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);
});
提问于
用户回答回答于

当窗口调整大小时,需要有一个事件侦听器。这对我起了作用(把它放在初始化函数中):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
用户回答回答于

检测浏览器调整大小事件,调整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‘Resizable’控件)。

注意:这段代码链接在@smftre对已接受的答案的评论中。认为这是值得加入它作为自己的答案,因为它是真正优于接受的答案。它不需要全局变量来跟踪中心点,也不需要事件处理程序来更新该变量。

扫码关注云+社区