jQuery 如何使用 Google Maps API v3.0 强制重绘？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18426083/
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
How do I force redraw with Google Maps API v3.0?
提问by Doug Wolfgram
I have a fairly sophisticated Maps application that handles multiple custom markers and such. I have a function called resizeWindow that I call in a listener to that whenever the screen is changed, the map redraws itself by calculating new bounds and forcing a resize. It looks like this:
我有一个相当复杂的地图应用程序，可以处理多个自定义标记等。我有一个名为 resizeWindow 的函数，每当屏幕更改时，我都会在侦听器中调用该函数，地图通过计算新边界并强制调整大小来重绘自身。它看起来像这样：
window.onresize = function(event) { fitmap(); };
and the function to resize is:
和调整大小的功能是：
function fitmap(id) {
var coords = [];
var newlatlng = new google.maps.LatLng(projlat, projlng);
coords.push(newlatlng);
for (var i=0; i<markers[id].length; i++) {
newlatlng = new google.maps.LatLng(markers[id][i].latitude, markers[id][i].longitude);
coords.push(newlatlng);
}
}
var bounds = new google.maps.LatLngBounds ();
for (var i = 0, LtLgLen = coords.length; i < LtLgLen; i++) {
bounds.extend (coords[i]);
}
map.fitBounds(bounds);
and this works great when I actually resize the window. But...
当我实际调整窗口大小时，这很有效。但...
I have a menu going down the right side of the window. I use jquery.animate to move that menu off the screen. I call the fitmap function as a step process (or just once at the end) and it will not redraw the map.
我在窗口的右侧有一个菜单。我使用 jquery.animate 将该菜单移出屏幕。我将 fitmap 函数称为一个步骤过程（或仅在最后一次），它不会重绘地图。
$('#rightSide').animate({ right:"-240px" }, {
duration:1000,
step: function(now,fx) {
fitmap();
}
});
I have read and read on this and it seems that there is an oddity of Google Maps API v3.0 that redrawing will not happen if nothing actually changes. In this case, my available window does change from screen width - menu to actual full screen. But no redraw happens.
我已经阅读并阅读了这个，似乎谷歌地图 API v3.0 有一个奇怪的地方，如果没有实际改变，重绘就不会发生。在这种情况下，我的可用窗口确实从屏幕宽度 - 菜单更改为实际全屏。但是没有重绘发生。
I've tried google.maps.event.trigger(map, 'resize'); and that doesn't work either.
我试过 google.maps.event.trigger(map, 'resize'); 这也不起作用。
Is there a way to absolutely force Google Maps to redraw?
有没有办法绝对强制谷歌地图重绘？
回答by Dr.Molle
google.maps.event.trigger(MapInstance,'resize')is working fine for me, put it at the begin of the function fitMap.
google.maps.event.trigger(MapInstance,'resize')对我来说工作正常，把它放在函数的开头fitMap。
What you are missing:
你缺少什么：
currently(not in the code posted above, in your live-code), you call resizeWindowon each step.
当前（不在上面发布的代码中，在您的实时代码中），您调用resizeWindow每个step.
When you call this function on stepthe function will be called beforethe animation for the current step has finished. The result is that resizeWindowwill not be called when the complete animation has been finished, there will be e.g. a margin on the right side of the map.
当您调用此函数时，step该函数将在当前步骤的动画完成之前被调用。结果是resizeWindow当完整的动画完成后不会被调用，例如地图右侧会有一个边距。
Solution: call resizeWindowalso on the complete-callback of the animation.
解决方案：调用resizeWindow也是对complete的-callback animation。
