0

はい、この問題は一般的であり、このサイトで多くの解決策を見てきましたが、どれも役に立ちませんでした. サイズを変更すると問題が解決することはわかっています。Headline 3jQuery の専門家ではなく、ページが読み込まれてアクティブになった後にマップのサイズを変更する方法がわかりません。JFiddle の例を作成しました。どんな助けでも大歓迎です。

http://jsfiddle.net/KhwZS/1300/

ありがとう

Ignore the top comment and the links provided by @Dr.Molle as these links do not provide the solution that I have been looking for, check out the solution I have accepted.

4

2 に答える 2

4

「単一タイル」の状態は、通常、非表示のキャンバスで Google マップを初期化することによって発生します。これは、ここに当てはまるようです。

マップを最初は非表示にしてサイズを変更したくない場合、次の 2 つの主なオプションがあります。

  • 表示されているキャンバスで初期化してからすぐに非表示にし、マップがフラッシュ表示されないことを願っています。

  • 最初の表示でマップを初期化します。私は自分のアプリケーションの 1 つでこれを行い、いくつかの重いレイヤリングにもかかわらず、遅延がまったく受け入れられないことを発見しました。

私は試したことはありませんが、次の可能性も考えられると思います。

  • 「目に見える」オフスクリーン キャンバスでマップを初期化し、最初のビューで画面上に再配置します。その後、キャンバスは従来どおり非表示/表示することができます。

編集

はい、マップは画面外で初期化してから画面上に移動できます。

HTML:

<div id="off_screen">
    <div class="googleMapContainer" id="map-canvas"></div>
</div>

...

<div class="tab">
    <h3>Headline 3</h3>
    <div id="map-placeholder"></div>
</div>

CSS:

#off_screen {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

Javascript:

var $mapCanvas = $("#map-canvas");
map = new google.maps.Map($mapCanvas.get(0), myOptions);
var listenerHandle = google.maps.event.addListener(map, 'idle', function() {
    $mapCanvas.appendTo($("#map-placeholder"));
    google.maps.event.removeListener(listenerHandle);
});

更新されたフィドルを参照してください

于 2013-06-30T11:37:23.620 に答える
1

resizeこれを修正する 1 つの方法は、タブが選択された後にマップ上でイベントをトリガーすることです。グローバル スコープに移動する場合はvar map;、次の行を変更できます。

$( ".tabs" ).tabs();

に：

$( ".tabs" ).tabs({
    activate: function( event, ui ) {
        google.maps.event.trigger( map, 'resize' );
    }
});

おそらく特定のタブをチェックして、マップタブが選択されたときにのみサイズ変更をトリガーすることで、それをさらに改善できますが、これで始めることができます. これが更新された fiddleです。

于 2013-06-30T09:36:00.623 に答える