2

Google Maps JavaScriptAPIv3のサイズ変更に問題があります。ロード時にCSSの「パラメータ」を設定した場合（ドキュメント内）、マップには100％の高さと幅が表示されます-問題ありません。しかし、リンクをクリックして同じ結果を得ようとすると、マップ全体が表示されません。

これは、フルスクリーンを切り替えるためにリンクをクリックするとマップがどのように表示されるかです

css()私はこのイベントでとtoggleClass()jQueryの両方をテストしました。toggleClass()次のコードを使用して、マップを非表示にします（マップを全画面表示にするのではなく、完全に非表示にします）。

// jQuery
$('#weather-map').toggleClass('test');

// CSS
#weather-map.test {
    height : 100%;
    width : 100%;
    top : 0;
    left : 0;
    position : absolute;
    z-index : 200;
}

css()動作します（マップは全画面表示になります）が、上の画像は、マップが全画面表示でどのようにレンダリングされるかを示しています。

$('#weather-map').css({
                       'height' : '100%',
                       'width' : '100%',
                       'top' : '0',
                       'left' : '0',
                       'position' : 'absolute',
                       'z-index' : '200'
                      });

なんでこんなふうに振る舞うのかしら？私は何かを逃したことがありますか、それともこの方法は地図の全画面を切り替えるのに適切な方法ではありませんか？

前もって感謝します。

4

1 に答える 1

4

これは、Google のマッピング Javascript の仕組みによるものです。コンテナーのサイズに基づいてレンダリングし、その後コンテナーのサイズが変更された場合に再レンダリングするためのハンドラーを追加しません。上記の例では、マップの初期化コードをもう一度呼び出して、サイズ変更された div でマップを再度レンダリングする必要があると思います。

于 2012-04-09T00:01:27.017 に答える