Question

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

Answer 1

当窗口调整大小时，您需要有一个事件监听器。这对我有用（把它放在你的初始化函数中）：

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

Answer 2

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

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

在通过其他方式调整Google地图的大小时，您可以在其他事件处理程序中使用相同的代码（例如，使用jQuery-UI'可调整大小的'控件）。

来源：http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/信用@smftre来获取该链接。

注意：此代码与@ smftre对已接受答案的评论相关联。我认为值得添加它作为自己的答案，因为它真的优于公认的答案。它不需要全局变量来跟踪中心点，也不需要事件处理程序来更新该变量。

Answer 3

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

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

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

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

Answer 5

更新了es6的上述解决方案。

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

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

中心谷歌地图（V3）在浏览器调整大小（响应）

5 个答案: