如何使用Google Maps API v3.0强制重绘?

Dou*_*ram 27 jquery google-maps-api-3 jquery-animate

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

window.onresize = function(event) { fitmap(); };
Run Code Online (Sandbox Code Playgroud)

并且调整大小的功能是:

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);
Run Code Online (Sandbox Code Playgroud)

当我实际调整窗口大小时,这很有用.但...

我有一个菜单从窗口的右侧下来.我使用jquery.animate将该菜单移出屏幕.我将fitmap函数称为步骤过程(或仅在结束时一次),它不会重绘地图.

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

我已阅读并阅读此内容,似乎Google Maps API v3.0存在一个奇怪的问题,即如果没有实际更改,重绘不会发生.在这种情况下,我的可用窗口确实从屏幕宽度 - 菜单更改为实际全屏.但是没有重绘.

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

有没有办法绝对强制谷歌地图重绘?

Dr.*_*lle 59

google.maps.event.trigger(MapInstance,'resize')对我来说工作正常,把它放在功能的开头fitMap.

你错过了什么:

目前(不在上面发布的代码中,在您的实时代码中),您可以调用resizeWindow每个代码step.

当您调用此函数时step,将在当前步骤的动画完成之前调用该函数.结果是,resizeWindow当完成动画完成时将不会调用,例如地图右侧将有一个边距.

解决方案:resizeWindow也可以调用complete-callback animation.