如何强制重绘Google Maps API v3.0？ [英] How do I force redraw with Google Maps API v3.0?

问题描述

我有一个相当复杂的地图应用程序，可处理多个自定义标记等。我有一个名为resizeWindow的函数，我在监听器中调用，当屏幕更改时，地图通过计算新边界和强制调整大小来重绘本身。它看起来像这样：

  window.onresize = function（event）{fitmap（）; }; 
  

以及调整大小的功能是：

 函数fitmap（id）{
 var coords = []; 
 var newlatlng = new google.maps.LatLng（projlat，projlng）; 
 coords.push（newlatlng）; $ var 
 $ b for（var i = 0; i< markers [id] .length; i ++）{
 newlatlng = new google.maps.LatLng（markers [id] [i] .latitude， [ID] [I] .longitude）标记; 
 coords.push（newlatlng）; 
} 
} 
 
 var bounds = new google.maps.LatLngBounds（）; 
 for（var i = 0，LtLgLen = coords.length; i  bounds.extend（coords [i]）; 
} 
 map.fitBounds（bounds）; 
  

当我调整窗口大小时，但... ...

我有一个菜单在窗口的右边。我使用jquery.animate将该菜单移出屏幕。我将fitmap函数称为步骤过程（或者最后一次），它不会重绘地图。

  $（'＃rightSide'）。animate（{right： -  240px}，{
 duration： 1000，
 step：function（now，fx）{
 fitmap（）; 
} 
}）; 
  

我已经阅读并阅读了这篇文章，似乎Google Maps API v3有一个奇怪的地方。 0如果没有真正改变，重绘将不会发生。在这种情况下，我的可用窗口从屏幕宽度 - 菜单变为实际的全屏。但是没有重绘。

我试过google.maps.event.trigger（map，'resize'）;那也行不通。

是否有绝对强制Google地图重新绘制的方法？

解决方案

google.maps.event.trigger（MapInstance，'resize'）对我来说工作的很好，把它放在函数 fitMap 的开头。

你缺少的东西：

目前（不在上面的代码中，在您的实时代码中），您可以分别调用 resizeWindow step 。





当您在步骤该功能将在当前步骤的动画完成之前称为。结果是，当完整的动画完成时， resizeWindow 将不会被调用，解决方案：在 resizeWindow >完成 - 动画的回调。

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:

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.

$('#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.

I've tried google.maps.event.trigger(map, 'resize'); and that doesn't work either.

Is there a way to absolutely force Google Maps to redraw?

解决方案

google.maps.event.trigger(MapInstance,'resize') is working fine for me, put it at the begin of the function fitMap .

What you are missing:

currently(not in the code posted above, in your live-code), you call resizeWindow on each step .

When you call this function on step the function will be called before the animation for the current step has finished. The result is that resizeWindow will not be called when the complete animation has been finished, there will be e.g. a margin on the right side of the map.

Solution: call resizeWindow also on the complete-callback of the animation.

这篇关于如何强制重绘Google Maps API v3.0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！