0

こんにちは、私はこの問題を抱えています。非表示の div にあるマップを含むページをロードすると、マップはマップの左上 1/4 の部分的にのみロードされます。隠れた。

この jsFiddle のサンプル ページを準備します。

http://jsfiddle.net/Z5AGP/2/

$("#toggleAdvanced").click(function(){
    $("#advancedSearch").slideToggle( "fast", function() {
        google.maps.event.trigger(map, 'resize');
    });
});

「クリック」テキストをクリックすると、地図が部分的に読み込まれますが、CSS を #map_wrapper { display: none; から変更してみてください。} から #map_wrapper { 表示: ブロック; 地図の非表示と表示ボタンをクリックすると完璧に機能します。

そして、ご覧のとおり、スライド効果の後に google.maps.event.trigger(map, 'resize') イベントをトリガーしているので、機能しているはずです...（私が見つけた他の質問で述べたように）

どうしたの？またはどうすればこれを解決できますか？

4

2 に答える 2

2

ダニエル・ジョーダンに感謝します。動的に追加されたものはすべてリセットされました。各divの表示/非表示の後、それを解決するために、マップがすでに初期化されているかどうかを確認する変数を追加しましたが、すべてが正しいです。

var mapInit = 0;
$(document).ready(function() {
    $("#toggleMap").click(function(){
        $("#map_wrapper").slideToggle( "fast", function() {
            if(mapInit == 0) { initialize(); mapInit = 1; }
            google.maps.event.trigger(map, 'resize');
        });
    });
});

それがこのトピックの解決策です

(最初のように) マップが既に初期化されている場合、なぜサイズ変更イベントの呼び出しが機能しなかったのでしょうか? (これはバグのようです。このような他の多くの質問では、イベントを呼び出しても何も起こらなかったことが言及されています。

よろしく

于 2013-04-27T20:03:57.187 に答える