在浏览器中调整Google地图（V3）的大小（响应）

我在页面中有一个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); }); 

Answer 1

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

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

Answer 2

检测浏览器resize事件，调整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); }); 

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

资料来源： http ： //hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is- resized / credit to @smftre for the link。

注意：这个代码被链接在@ smftre对接受的答案的评论中。 我觉得值得把它作为自己的答案，因为它比公认的答案要好得多。 它消除了需要一个全局variables来跟踪中心点和一个事件处理程序来更新该variables。

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：创build一个你select的ID的div

 <div id="map"></div> 

JS：创build一个地图，并将其附加到刚创build的div

 var map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: new google.maps.LatLng(-33.890542, 151.274856) }); 

当窗口resize时居中

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

Answer 5

上面的解决scheme更新到es6。

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