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

问题描述

我有一个相当复杂的地图应用程序，可以处理多个自定义标记等.我有一个名为 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(); };

调整大小的函数是:

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...

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

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

我已经阅读并阅读了这个，似乎谷歌地图 API v3.0 有一个奇怪的地方，如果没有实际改变，重绘就不会发生.在这种情况下，我的可用窗口确实从屏幕宽度 - 菜单更改为实际全屏.但是没有发生重绘.

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.

我试过 google.maps.event.trigger(map, 'resize');这也不起作用.

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') 对我来说很好用，把它放在函数 fitMap .

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

您缺少什么:

当前(不在上面发布的代码中，在您的实时代码中)，您在每个 step 上调用 resizeWindow .

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

当您在 step 调用此函数时，该函数将在 before 当前步骤的动画完成之前调用.结果是在完整的动画完成后不会调用 resizeWindow ，会出现例如地图右侧的空白处.

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.

解决方案:在动画的complete回调上也调用resizeWindow.

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

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