当浏览器大小改变时（响应式），如何在Google Maps（V3）中心地图？

Question

我的网页中有一个100%页面宽度的Google Maps（V3）和一个在中间的标记。当我调整浏览器窗口的宽度时，我希望地图保持居中（响应式）。现在地图只会停留在页面左侧并变小。

更新 感谢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);
});

- Gregory Bolkenstijn

---

很棒的工作！是的，您必须持续将当前中心值输出到全局范围，以便DOM监听器可以捕获它。 - ericjam

如果您要这样做，那么center不需要是全局的。只要center(和calculateCenter)与map在同一作用域中，那么一切都应该正常工作。当然，如果map是全局的，那么您也需要修复它 :) - Roamer-1888

也许对大多数人来说很明显，但是这段代码在地图加载后才会执行，因此它至少应该在windows.onload上。 - Victoria Ruiz

谢谢，这应该是默认的Google地图行为。 - Yukulélé

Answer 1

您需要为窗口大小调整时添加一个事件监听器。这对我很有用（将其放在初始化函数中）：

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

- duncan

---

这个很完美，谢谢！但是如果有人移动了地图，我该如何获得新的地图中心？我找到了getCenter()函数，但是无法正确运行它。map.setCenter(map.getCenter());不能工作。 - Gregory Bolkenstijn

我也尝试过这个方法：var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); });但是没有效果。希望能得到帮助。 - Gregory Bolkenstijn

这是最简单的方法：http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/。 - AO_

伙计们，addDomListener(window, 'resize', function() { 对我没用 :( - Vikram Anand Bhushan

@duncan，它起作用了，但我必须将其添加到orientationchange事件中。 - Vikram Anand Bhushan

Answer 2

检测浏览器调整大小事件，保持中心点不变，同时调整谷歌地图的大小。

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的'resizable'控件）。

来源：http://ataiva.com/keep-google-map-v3-centered-when-browser-is-resized/ 链接由@smftre提供。

注意：这段代码是在@smftre对被接受的答案的评论中提供的。我认为将其作为独立的答案添加进来是值得的，因为它真正优于被接受的答案。它消除了跟踪中心点的全局变量和更新该变量的事件处理程序的需要。

- William Denniss

---

同意@William的观点，这种方法可以在调整地图大小时得到更准确的中心位置。 - tenthfloor

接受的答案没有正常工作，这个解决了问题。 - Tom

这是最好的、可行的解决方案。适用于每次调整窗口大小的事件。其他解决方案没有正常工作。 - zdarsky.peter

这个应该作为社区维基发布。 - gustavohenke

它能够工作，但我想更深入地了解它。google.maps.event.trigger(map, "resize"); 究竟是什么意思？ - meduz'

@WilliamDenniss的链接已更新为：http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ - AO_

Answer 3

w3schools.com上有一些很好的例子。我使用了以下代码，它运行得非常好。

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

http://www.w3schools.com/googleapi/google_maps_events.asp

- Steve Mulvihill

Answer 4

HTML：创建一个带有您选择的ID的div

<div id="map"></div>

js：创建一个地图并将其附加到刚创建的 div 上

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

窗口大小调整时居中

var center = map.getCenter();

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

- drjorgepolanco

Answer 5

以上解决方案已更新为es6。

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

- David Bradshaw

---

你正在同时使用 addDomListener 来处理 window 和 map 两个对象，其中 window 是一个 DOM 元素，而 map 不是。应该使用 google.maps.event.addListener 或者 map.addListener 来处理地图对象的事件。 - duncan