google-maps - google.maps.event.trigger

Question

Google マップを機能させるのに何時間も苦労しました。2 番目のタブをクリックすると、マップは 30% しか表示されません。壊れてます。イベントトリガーを使用してマップをリロードしています。

マップを完全に表示するための解決策??????

Answer 1

最初に、Demo.mapと言っている箇所とdemo.mapと言っている箇所があることに気づきました。エラーを避けるために、コード全体で一貫した大文字を使用してください。また、jQueryステートメントの前に変数宣言を配置して、エラーを減らすこともできます。

Answer 2

正しいアイデアを持っているように見えますが、マップにDemo.Mapという名前を付け、demo.mapでサイズ変更をトリガーしています。

demo.map！== Demo.map

編集：コメントへの応答

jQuery UIタブAPI（http://api.jqueryui.com/tabs/#option-show）を確認します-呼び出す必要のあるイベントの名前はアクティブであり、表示されないため、次のコードを使用します。

$(function() {
    $("#tabs").tabs({
        show: function(e, ui) {
            if (ui.index == -1) {
                google.maps.event.trigger(Demo.map, "resize");
            }
        }
    });
});

次のようになります（ifステートメントを削除します-サイズ変更イベントは軽量であり、不要なときに呼び出すかどうかは関係ありません）：

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

Answer 3

この仲間を試してみてください

$(function() {
    $("#tabs").tabs({
        show: function(e, ui) {                                
         google.maps.event.trigger(Demo.map, "resize");   
        }
    });
});