15

我试图让谷歌地图出现在香草引导选项卡中。我直接从 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>
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 回答
10

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

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

 $('#myTab a[href="#profile"]').on('shown', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng);
 });
于 2013-04-08T09:05:18.697 回答
9

您对“调整大小”事件的强大程度有点过于乐观了。从文档中：

  • resize：当 div 改变大小时，开发者应该在地图上触发这个事件：google.maps.event.trigger(map, 'resize')

换句话说，调整大小不会做任何花哨的事情，比如将地图调整到窗口大小，而只会调整到它所在的容器——在这种情况下，“map_canvas”div。但是，这个 div 没有维度，所以地图的大小为零。

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

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

将其大小调整为 400x400。这是一个示例，您应该能够将其更改为您想要的任何内容。

于 2012-11-29T23:39:37.470 回答
2

我也遇到了带有 Bootstrap 3 的 Google Maps 的问题，但是我用基于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        
     }
 });

好吧..至少它对我有用:)

于 2013-12-21T15:39:27.893 回答
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“显示”触发器调用 initialize() 函数。然后在点击 TAB 时加载地图

google.maps.event.addDomListener(window, 'load', 初始化);

jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e)
{   
    initialize();
});
于 2016-06-25T21:21:39.533 回答
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(){});
...

几乎任何变化都不起作用。我设法通过使用链接ID而不是href比较使其在第一次选项卡单击时工作，但是当我单击另一个选项卡并再次返回时，再次出现灰色地图......我就像 - 认真的！？

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

希望将来能帮助别人。

于 2016-11-25T14:52:14.373 回答
0

使用下面的脚本

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

            init();

        });
于 2017-02-23T04:36:29.360 回答
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 回答