在浏览器调整大小(响应式)上居中 Google Maps (V3)

IT技术 javascript google-maps google-maps-api-3
2021-02-20 22:52:30

我的页面中有一个 Google 地图 (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);
});
5个回答

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

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
这是最简单的方法:hsmoore.com/blog/...
2021-04-22 22:52:30
这工作完美,谢谢!但是如果有人移动了地图,我如何获得地图的新中心?我找到了 getCenter() 函数,但无法使其正常工作。map.setCenter(map.getCenter()); 不起作用。
2021-05-04 22:52:30
“bounds_changed”怎么样?
2021-05-07 22:52:30
您需要另一个事件侦听器,我认为是地图对象上的“center_changed”,它使用新坐标更新全局变量,然后您可以在 setCenter 中使用它。
2021-05-08 22:52:30
我也试过了: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); 不起作用。任何帮助,将不胜感激。
2021-05-15 22:52:30

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

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 : //hsmoore.com/blog/keep-google-map-v3-central-when-browser-is-resized/链接归功于@smftre

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

这是最好的和有效的解决方案。适用于每个调整大小的窗口事件。其他解决方案无法正常工作。
2021-04-18 22:52:30
接受的答案没有正常工作,这个就成功了
2021-04-22 22:52:30
它有效,但我想更多地了解它。究竟是做google.maps.event.trigger(map, "resize");什么的?
2021-04-28 22:52:30
这确实应该作为社区维基发布。
2021-05-05 22:52:30
同意@William,当调整地图大小时,此方法会导致更准确的中心位置。
2021-05-11 22:52:30

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));
您将addDomListener用于windowDOM 元素,而map则不是。地图对象应该使用google.maps.event.addListener或它自己的map.addListener事件处理程序。
2021-04-26 22:52:30