Javascript 在浏览器调整大小（响应式）上居中 Google Maps (V3)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8792676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center Google Maps (V3) on browser resize (responsive)
提问by Gregory Bolkenstijn
I have a Google Maps (V3) in my page at 100% page width with one marker in the middle. When I resize my browser window's width I would like the map to stay centered (responsive). Now the map just stays at the left side of the page and gets smaller.
我的页面中有一个 Google 地图 (V3)，页面宽度为 100%，中间有一个标记。当我调整浏览器窗口的宽度时，我希望地图保持居中（响应）。现在地图只停留在页面的左侧并变小。
UPDATE Got it to work exactly as described thanks to duncan. This is the final code:
更新 多亏了邓肯，它才能完全按照描述的那样工作。这是最终的代码：
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);
});
回答by duncan
You need to have an event listener for when the window resizes. This worked for me (put it in your initialize function):
当窗口调整大小时，您需要有一个事件侦听器。这对我有用（把它放在你的初始化函数中）：
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
回答by William Denniss
Detect the browser resize event, resizes the Google Map while preserving the center point:
检测浏览器调整大小事件，在保留中心点的同时调整谷歌地图的大小：
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);
});
You can use the same code in other event handlers when resizing the google map via other means (e.g. with a jQuery-UI 'resizable' control).
通过其他方式（例如使用 jQuery-UI 'resizable' 控件）调整谷歌地图大小时，您可以在其他事件处理程序中使用相同的代码。
Source: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/credit to @smftrefor the link.
来源：http: //hsmoore.com/blog/keep-google-map-v3-central-when-browser-is-resized/链接归功于@smftre。
Note: This code was linked in @smftre's comment on the accepted answer. I think it's worth adding it as its own answer since it is really superior to the accepted answer. It eliminates the need of a global variable to track the center point and an event handler to update that variable.
注意：此代码链接在@smftre 对已接受答案的评论中。我认为值得将其添加为自己的答案，因为它确实优于公认的答案。它消除了跟踪中心点的全局变量和更新该变量的事件处理程序的需要。
回答by Steve Mulvihill
Some good examples on w3schools.com. I used the following and it works great.
w3schools.com 上的一些很好的例子。我使用了以下方法，效果很好。
google.maps.event.addDomListener(window, 'resize', function() {
map.panTo(myLatlng);
});
回答by drjorgepolanco
html: Create a div with an id of your choice
html：使用您选择的 id 创建一个 div
<div id="map"></div>
js: Create a map and attach it to the div you just created
js：创建一个地图并将其附加到您刚刚创建的div
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.890542, 151.274856)
});
Center when the window resizes
调整窗口大小时居中
var center = map.getCenter();
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
回答by David Bradshaw
Updated of the above solution to es6.
将上述解决方案更新为 es6。
let center;
const addMapListener = google.maps.event.addDomListener;
addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
