15

Google マップをバニラの Bootstrap タブに表示しようとしています。Bootstrap docs から直接取得したフィドルを作成しました。Gmap スクリプトは、Google が推奨しているのとほぼ同じです。

mapオブジェクトを console.dirにダンプしていますが、適切に初期化されています。以前のプロジェクトでは、resize関数を使用してマップをタブに表示できましたが、Bootstrap では機能しないようです。

誰かがこれを機能させましたか？

これが一般的なjsfiddleです- http://jsfiddle.net/B4zLe/4/

編集: コードの追加

ジャバスクリプト:

var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
    });
});

HTML:

<div>
<div class="bs-docs-example">
    <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Map</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <div id="map_canvas"></div>   
    </div>
</div>
4

10 に答える 10

30

Boostrap 3 の更新された回答:

$("a[href='#my-tab']").on('shown.bs.tab', function(){
  google.maps.event.trigger(map, 'resize');
});

タブ自体ではなく、タブへのリンクを選択していることに注意してください。

于 2013-09-11T17:46:28.883 に答える
20

.tab-content > .tab-pane {display: none}
これを使用しないでください

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}
于 2015-09-05T23:53:07.280 に答える
9

「サイズ変更」イベントがいかに強力であるかについて、あなたは少し楽観的すぎます。ドキュメントから：

  • サイズ変更：開発者は、divのサイズが変更されたときにマップ上でこのイベントをトリガーする必要があります：google.maps.event.trigger（map、'resize'）

つまり、resizeは、マップをウィンドウにサイズ変更するような特別なことは何もしませんが、マップが含まれているコンテナ（この場合は「map_canvas」div）にのみサイズ変更します。ただし、このdivにはディメンションがないため、マップのサイズはゼロです。

マップが親のサイズに変更されるようにリスナーを追加したので、これは非常に簡単な修正です。親divを目的のサイズに変更するコードを追加するだけで、マップのサイズが変更されます。例えば：

$("#map_canvas").css("width", 400).css("height", 400);

サイズは400x400になります。これが例です、あなたはそれをあなたが望むものに変えることができるはずです。

于 2012-11-29T23:39:37.470 に答える
0 
var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
        $("#map_canvas").css("height", 400);
    });
});

フィドル

于 2015-01-05T11:04:32.277 に答える
0

2016 年になっても問題が解決しない場合は、Google DOM ハンドラーを削除し、上記で既に説明したように、jQuery の「show」トリガーを使用して initialize() 関数を呼び出します。次に、タブをクリックするとマップがロードされます

google.maps.event.addDomListener(window, 'load', initialize);

jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e)
{   
    initialize();
});
于 2016-06-25T21:21:39.533 に答える
0

cevataslnによる絶対に素晴らしい解決策。私も、考えられるすべての jQuery および Javascript ソリューションを使用しましたが、どれも機能しませんでした! 特定のタブをターゲットにして、動的ギャラリーまたは何かを使用する場合、これが機能します

.tab-content > #tab5.tab-pane {
   display: block;
   height:0;
   max-height:0;
   overflow:hidden;
}

.tab-content > #tab5.active  {
   display: block;
   height:auto;
   max-height: 100%;
}
于 2017-09-15T14:08:10.647 に答える
0

以下のスクリプトを使用

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

            init();

        });
于 2017-02-23T04:36:29.360 に答える
0

Bootstrap 3.3.7、jquery 1.11.3、およびタブにまだ問題があります。ロード時に最初に非表示になっているタブにマップを配置しようとするまで、すべてが正常に機能します。その後、マップが読み込まれ、すべてが機能するはずですが、マップの灰色 (または他の色、不明) の領域しか表示されません。そこではすべてを行うことができますが、マップ自体は表示されません。マップ内にドラッグすると、いくつかのものが表示される場合がありますが、一般的には空白のマップです。

オプション 1 - ウィンドウのサイズを少し変更すると、マップが表示されます。ただし、タブを変更するとすぐに消えてしまうという欠点もあります。

オプション 2 - 最初のタブにマップを配置して、それで完了できます。

オプション 3 - マップを「サイズ変更」するコードを作成するだけです (前に示したように)。しかし、そこで問題に遭遇しました-それは常に機能するとは限りません。少なくとも私にはうまくいきませんでした：

.on("shown", function(){})
.on("shown.bs.tab", function(){});
.on("show.bs.tab", function(){});
...

ほぼすべてのバリエーションが機能しませんでした。href の比較ではなくリンク ID を使用して、最初のタブのクリックで機能させることができましたが、別のタブをクリックしてもう一度戻るとすぐに、グレーのマップが再び表示されました... 真剣に!?

最後に、私は解決策を思いつきました: その特定のタブをクリックすると (ID をお勧めします)、必要なものがすべて作成されます。つまり、次のことを意味します-他の場所（他のリンクまたはタブ）をクリックしてマップタブに戻るたびに、そのマップがリロードされます（そのため、少し遅くなる可能性があります-インターネットに依存します）が、少なくともマップは空ではありませんGoogle マップの灰色のイメージ。

将来、他の誰かに役立つことを願っています。

于 2016-11-25T14:52:14.373 に答える