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

更新了Bootstrap 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

你对“调整大小”事件的强大程度有点过于乐观。来自the documentation:

调整大小：当div更改大小时，开发人员应在地图上触发此事件：google.maps.event.trigger（map，'resize'）

换句话说，调整大小不会做任何像花大小的地图到窗口的大小，但只会将其大小调整到它所在的容器 - 在本例中为“map_canvas”div。但是，此div没有尺寸，因此地图的大小为零。

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

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

将其大小设置为400x400。 Here's an example，您应该可以将其更改为您想要的任何内容。

Answer 5

我在使用Bootstrap 3的谷歌地图时遇到了问题，但我用Andy B代码的小技巧解决了这个问题：

 var cl=0;
 $("a[href='#maptab']").on('shown.bs.tab', function(){
     cl++;
     if(cl == 1){   // this is to prevent map initialized twice or more
         initialize();
     }
     else{
        //do nothing        
     }
 });

嗯..至少它对我的工作：）

Answer 6

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);
    });
});

<强> Fiddle

Answer 7

问题在2016年仍然存在，删除google DOM处理程序并使用jQuery“show”触发器调用initialize（）函数，如上所述。然后在点击TAB

时加载地图

~~google.maps.event.addDomListener（窗口，'加载'，初始化）;~~

jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e)
{   
    initialize();
});

Answer 8

仍然存在Bootstrap 3.3.7，jquery 1.11.3和标签的问题。一切正常，直到您尝试将地图放入首先隐藏加载的标签。然后你加载地图，一切都应该工作，但你只看到灰色（或任何其他颜色，不确定）的地图区域。你可以在那里做所有事情，但你看不到地图本身。在地图内拖动时，您可能会看到一些东西，但一般来说 - 空白地图。

选项1 - 您可以在稍微调整窗口大小时看到地图。但也有垮台 - 一旦你改变标签，它就会再次消失。

选项2 - 您可以将地图放在第一个标签上并完成。

选项3 - 您只需制作一个代码来“调整大小”地图（如前所示）。但那里我遇到了问题 - 这并不总是有效。至少它对我不起作用：

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

几乎任何变化都不起作用。我设法通过使用链接ID而不是href比较来使其在第一次选项卡点击时工作，但是当我点击另一个选项卡然后再次返回时，灰色地图再次...我很喜欢 - 认真！？

最后，我提出了解决方案：在特定的选项卡上点击（我推荐使用id），它会做出所有必要的事情。这意味着以下 - 每次你点击其他地方（其他链接或标签）并返回地图选项卡，它将重新加载该地图（因此可能会有点慢 - 取决于互联网），但至少我得到地图，而不是空谷歌地图的灰色图像。

希望将来帮助别人。

Answer 9

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%;
}

Bootstrap选项卡中的Google Map

9 个答案: