在浏览器上居中调整谷歌地图(V3）的大小(响应）

Center Google Maps (V3) on browser resize (responsive)

本文关键字：V3 响应 谷歌地图 浏览器 调整      更新时间：2023-09-26

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

更新多亏了邓肯，它才真正发挥了作用。这是最后一个代码：

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

检测浏览器调整大小事件，调整谷歌地图的大小，同时保留中心点：

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://andrewodendaal.com/keep-google-map-v3-centered-when-browser-is-resized/感谢@smftre的链接。

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

w3schools.com上的一些好例子。我使用了以下内容，效果很好。

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

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

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

将上述解决方案更新为es6。

let center;
const addMapListener = google.maps.event.addDomListener;
addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
相关文章：