在浏览器调整大小(响应)上居中显示谷歌地图(V3)

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

UPDATE 多亏了 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);
});
93135 次浏览
小开
最佳答案

您需要为窗口调整大小时设置一个事件侦听器。这对我很有用(把它放到你的初始化函数中) :

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

检测浏览器调整大小事件，调整 Google Map 的大小，同时保留中心点:

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).

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

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

小开

一些很好的例子，我用了下面的方法，效果很好。

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: 创建一个 map 并将其附加到刚才创建的 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));

提交答案