0

グーグルマップを初期化するときにこのバグが発生します-キャンバスが（アクティブではない）タブに隠されている間。->スクロールおよびズーム可能ですが、キャンバス全体に拡張されることはなく、キャンバスの残りの部分は灰色のままです。

ここに画像の説明を入力してください

jQuery Map Extension（http://code.google.com/p/jquery-ui-map/）を使用してページにgmapをロードしています。また、2つのタブビューがあり、一方のタブにはマップがなく、もう一方のタブにはgmapがあります。

2つのシナリオがあります（ページロードでマップを初期化します）：1。ページがロードされてTAB1（マップあり）が表示されます2.ページがロードされてTAB2（マップなし）が表示されます

シナリオ1では、すべてが正常で、マップが表示および表示され、正常に動作します。シナリオ2では、マップは上の画像のようになります

タブを切り替えるときに、マップを再度初期化しようとしました。しかし、これは何の効果もないようです。

  • gmap要素を適切に再初期化するオプションはありますか？
  • gmap要素を再膨張させる方法は？
  • 同様のバグがあり、私のための解決策を知っていますか？

ありがとう！パトリック

4

3 に答える 3

2

以前の回答で述べたように、Googleマップは、初期化されると、そのコンテナのサイズのマップのみをレンダリングします。含まれている要素が非表示の場合、マップはサイズ0x0でレンダリングされます。

resizeマップ自体でイベントをトリガーすることにより、マップに含まれるサイズが変更されたことをマップに通知する必要があります。

// Assuming "map" is the map object returned by "google.maps.Map"
google.maps.event.trigger(map, 'resize');
于 2012-11-20T18:16:38.257 に答える
1

既知の問題/意図したとおりに機能しています。タブがクリックされた後、タブ内のマップを初期化するには、タブにハンドラーを追加する必要があります。むしろ、タブがアクティブになるまでマップを初期化しないでください。

于 2012-11-20T17:52:31.360 に答える
0

すでに述べたように、これは既知の問題です。解決策は、タブを表示したときにマップを動的にロードすることです。私はあなたのコードを見ることができないので、これは非常に簡単な一般的な解決策です。タブの内容を表示するために使用する関数を次のように変更します。特定のタブをロードするときは、マップの存在を確認し、必要に応じてロードします。

$(document).ready(function() {

    function my_tab_reveal() {  // or whatever function you use for showing your tabs content
        // whatever your code for revealing tab content is here

        if (!loaded) {  // this checks to see if the map is not already loaded
            load(); // this loads the map
        }
    }

    var loaded = false;
    load = function() {
        // your google maps JavaScript code goes here

        // checks tiles to see if map has loaded
        google.maps.event.addListener(map, "tilesloaded", function() {
            loaded = true;
        });
    }

});
于 2012-11-20T18:08:26.230 に答える