web-dev-qa-db-ja.com

Google Maps API v3.0で強制的に再描画するにはどうすればよいですか？

複数のカスタムマーカーなどを処理するかなり洗練されたMapsアプリケーションがあります。画面が変更されるたびに、新しい境界を計算してサイズ変更を強制することによってマップが再描画されるように、リスナーで呼び出すresizeWindowという関数があります。次のようになります。

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関数をステッププロセスとして（または最後に一度だけ）呼び出しますが、マップは再描画されません。

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

私はこれを読んだり読んだりしましたが、Google Maps API v3.0には、実際に何も変わらなければ再描画が起こらないという奇妙な点があるようです。この場合、使用可能なウィンドウは、画面の幅-メニューから実際の全画面に変わります。ただし、再描画は行われません。

Google.maps.event.trigger（map、 'resize'）;を試しました。それも機能しません。

Googleマップを絶対に強制的に再描画する方法はありますか？

jquerygoogle-maps-api-3jquery-animate
27
Doug Wolfgram

google.maps.event.trigger(MapInstance,'resize')はうまく機能しています。関数fitMapの先頭に配置してください。

不足しているもの：

現在（上記のコードではなく、ライブコードで）、各resizeWindowでstepを呼び出します。

stepでこの関数を呼び出すと、関数が呼び出されますbefore現在のステップのアニメーションが終了しました。その結果、完全なアニメーションが終了したときにresizeWindowが呼び出されなくなります。マップの右側のマージン。

解決策：resizeWindowのcompleteコールバックでもanimationを呼び出します。

59
Dr.Molle