Javascript 容器更改宽度后居中 Google 地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8558226/
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
Recenter a Google map after container changed width
提问by Charleshaa
I have a google map set with the Javascript API V3. It's displayed in a div with a dynamic width, as a content pane slides up when we click on a marker.
我有一个带有 Javascript API V3 的谷歌地图集。它显示在具有动态宽度的 div 中，因为当我们单击标记时内容窗格会向上滑动。
Everything works fine, but one thing: When the pane slides up, the width of the map is changed, and so the center is displaced to the right (the pane is on the left). It is really inconvienient especially for small resolutions, where you can't even see the center after the pane is open.
一切正常，但有一件事：当窗格向上滑动时，地图的宽度会发生变化，因此中心会向右移动（窗格在左侧）。这真的很不方便，特别是对于小分辨率，在窗格打开后你甚至看不到中心。
I've tried the 'resize' trigger, but it doesn't seem to work... Any ideas ?
我试过“调整大小”触发器，但它似乎不起作用......有什么想法吗？
Thanks a lot !
非常感谢 ！
回答by omarello
Calling resizeby it self will not acheive what you need.
resize通过它自己调用不会达到你所需要的。
What you need to do is first (before a resize occurs) get the current center of the map
您需要做的是首先（在调整大小发生之前）获取地图的当前中心
var currCenter = map.getCenter();
Then you need to do something like the following, after your div is resized.
然后，在调整 div 大小后，您需要执行以下操作。
google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);
Should do the trick
应该做的伎俩
UPDATE 2018-05-22
更新 2018-05-22
With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Mapclass.
随着 Maps JavaScript API 3.32 版中的新渲染器版本，resize 事件不再是Map类的一部分。
The documentation states
该文件指出
When the map is resized, the map center is fixed
The full-screen control now preserves center.
There is no longer any need to trigger the resize event manually.
调整地图大小时，地图中心固定
全屏控制现在保留中心。
不再需要手动触发调整大小事件。
source: https://developers.google.com/maps/documentation/javascript/new-renderer
来源：https: //developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize");doesn't have any effect starting from version 3.32
google.maps.event.trigger(map, "resize");从版本 3.32 开始没有任何影响
回答by Tyler Rafferty
First set a variable for the current center, then use a event listener to detect a resize, and thusly set center.
首先为当前中心设置一个变量，然后使用事件侦听器检测调整大小，从而设置中心。
//Get current center
var getCen = map.getCenter();
//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
//Set Center
map.setCenter(getCen);
});
回答by efwjames
omarello does work but I can't upvote it. You probably forgot to refer to the var that defines your center coordinates. All "resize" does is pull the divs current width and height, it does not change anything about the map--yet!
omarello 确实有效，但我无法投票。您可能忘记引用定义中心坐标的 var。“调整大小”所做的只是拉动 div 当前的宽度和高度，它不会改变地图的任何内容——但是！
var center = new google.maps.LatLng(39.5, -98.3);
$(document).ready(function() {
$("#fullsize").click(function(e) {
e.preventDefault();
$("#map_canvas").css({
width: '1000px'});
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
});
回答by Jose Rocha
Hy there try this ;)
嘿，试试这个；）
On map initialization
关于地图初始化
var currentMapCenter = null;
google.maps.event.addListener(map, 'resize', function () {
currentMapCenter = map.getCenter();
});
google.maps.event.addListener(map, 'bounds_changed', function () {
if (currentMapCenter) {
// react here
map.setCenter(currentMapCenter);
}
currentMapCenter = null;
});
After this just call when tou want the map resize.
在此之后，只需在您想要调整地图大小时调用。
google.maps.event.trigger(map, 'resize');
