在浏览器调整大小时将谷歌地图（V3）居中（响应式）

javascript google-maps google-maps-api-3

2022-08-30 04:51:03

我的页面中有一个谷歌地图（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);
});

答案 1

您需要有一个事件侦听器，用于窗口调整大小时的情况。这对我有用（把它放在你的初始化函数中）：

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

答案 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); 
});

当通过其他方式调整谷歌地图大小时，您可以在其他事件处理程序中使用相同的代码（例如，使用jQuery-UI“可调整大小”控件）。

资料来源：http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/@smftre的链接。

注意：此代码链接在@smftre对已接受答案的评论中。我认为值得添加它作为自己的答案，因为它确实优于公认的答案。它消除了跟踪中心点的全局变量和更新该变量的事件处理程序的需要。