Bootstrap选项卡中的Google Map

Question

我正在尝试将Google地图显示在vanilla Bootstrap选项卡中.我直接从Bootstrap文档构建了一个小提琴,Gmap脚本与Google建议的完全一样.

我将map对象转储到console.dir并已正确初始化.在早期的项目中,我能够使用resize函数在选项卡中显示地图 - 但它似乎不适用于Bootstrap.

有没有人得到这个工作？

这是通用的jsfiddle-- http://jsfiddle.net/B4zLe/4/

编辑:添加代码

JAVASCRIPT:

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>

Answer 1

更新了Boostrap 3的答案:

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

请注意,您选择的是指向选项卡的链接,而不是选项卡本身.

Answer 2

不要.tab-content > .tab-pane {display: none}
用这个

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

.tab-content > .active {
    display: block;
    height:auto;
}

Answer 3

显示选项卡时调整地图大小

http://jsfiddle.net/B4zLe/49/

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

Answer 4

你对"调整大小"事件的强大程度有点过于乐观了.从文档:

• 调整大小:当div改变大小时,开发人员应该在地图上触发此事件:google.maps.event.trigger(map,'resize')

换句话说,调整大小不会做任何花哨的事情,就像调整窗口大小一样,但只会将其大小调整到它所在的容器 - 在本例中为"map_canvas"div.但是,此div没有尺寸,因此地图的大小为零.

由于您添加了一些侦听器以确保地图将更改为其父级的大小,因此这是一个非常简单的修复 - 只需添加一些代码即可将父div修改为所需的大小,并且地图将调整大小.例如:

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

将它的大小设置为400x400.这是一个例子,您应该能够将其更改为您想要的任何内容.