jquery - 如何使用 Google Maps API v3.0 强制重绘？

Question

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

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

当我实际调整窗口大小时，这非常有用。但是...

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

$('#rightSide').animate({ right:"-240px" }, { 
    duration:1000, 
    step: function(now,fx) {
        fitmap();
    } 
});

我已经阅读并阅读了此内容，似乎 Google Maps API v3.0 有一个奇怪的地方，即如果实际上没有任何更改，则不会发生重绘。在这种情况下，我的可用窗口确实从屏幕宽度 - 菜单更改为实际全屏。但没有发生重绘。

我尝试过 google.maps.event.trigger(map, 'resize');那也行不通。

有没有办法绝对强制 Google map 重绘？

Answer 1

google.maps.event.trigger(MapInstance,'resize') 对我来说工作正常，将其放在函数 fitMap 的开头。

你缺少什么:

目前(不是在上面发布的代码中，而是在您的实时代码中)，您在每个 step 上调用 resizeWindow 。

当您在步骤上调用此函数时，该函数将在当前步骤的动画完成之前调用。结果是当完整的动画完成时，resizeWindow将不会被调用，例如 map 右侧的边距。

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