引导选项卡中的谷歌地图

Posted 2023-02-23

【中文标题】引导选项卡中的谷歌地图

【英文标题】：Google Map in Bootstrap Tab

【发布时间】：2012-11-18 02:58:33

【问题描述】：

我正在尝试让 Google 地图出现在原版 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>

【参考方案1】：

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

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

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

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

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

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

【讨论】：

@Bubbles——谢谢！我理解这是如何工作的，但谷歌地图的默认行为不是适合它所在的容器吗？我想我不确定如何处理 div 仅为 100% 的情况。

是的，但在这种情况下容器的大小为零。我认为这可能是一个先有鸡还是先有蛋的问题 - div 通常会扩展以适应内容（这取决于样式规则，但我们将忽略细节），但在这种情况下，内容取决于容器的位置。因此，内容查看容器的大小，找到零大小，并将自己设置为该大小（并且容器永远不会扩展，因为内容永远不会扩展）。您必须添加某种大小调整规则，即使它只是告诉“map_canvas”根据其父级调整自身大小。

谢谢——我使用$("#map_canvas).wdith() 来获取容器的宽度，并将其设置为地图的宽度——但是当我尝试使用.height() 来获取高度时容器，它什么也不返回：jsfiddle.net/B4zLe/8 -- 有什么想法吗？

嗯，这是同样的问题 - map_canvas 是一个容器，在指定之前没有高度，或者它的内容获得高度（因为它是一个块元素，它的宽度自然会达到它可以的最大尺寸充满）。 Here's 使用 css 的一个有点 hacky 的解决方法，但它可能不像你想要的那样灵活。

【参考方案2】：

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

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

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

【讨论】：

如何在另一个 TAB 中添加街景地图。我只是无法让它工作。我试过了，但没有成功。 jsfiddle.net/B4zLe/157

【参考方案3】：

Boostrap 3 的更新答案：

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

请注意，您选择的是选项卡的链接，而不是选项卡本身。

【讨论】：

你需要保留当前中心var newmapcenter = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(newmapcenter);

这个答案是让 *** 很棒的答案。谢谢@apb。 @shady-sherif 的评论也很有用，因为地图在resize 触发事件后偏心。

感谢 1000 次。

【参考方案4】：

我在使用 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        
     
 );

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

【参考方案5】：

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

【参考方案6】：

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

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


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

【讨论】：

这是一个很好的解决方案，不需要 Javascript。当我在两个选项卡中有两个单独的地图时，这对我来说非常适合。

一个完美的解决方案，我会给这个答案1000分，但不幸的是这是不可能的。我尝试了不止一种涉及使用 javascript 的解决方案。这简直完美无缺。

bootstrap 3 的独家解决方案，你太棒了！

使用了我能找到的所有 jquery 技巧，但这非常有效。谢谢

非常感谢，我已经尝试了很多关于调整大小甚至 twitter bootstrap 的 show.bs.tab 事件的建议，但只有你的解决方案解决了问题，这应该被标记为正确答案。

【参考方案7】：

问题在 2016 年仍然存在，删除 google DOM 处理程序并使用上面已经写过的 jQuery“显示”触发器调用 initialize() 函数。然后在点击 TAB 时加载地图

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

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

【参考方案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），它完成了所有必要的事情。这意味着跟随 - 每次您单击其他地方（其他链接或选项卡）并返回地图选项卡时，它都会重新加载该地图（因此可能会有点慢 - 取决于互联网），但至少我得到了地图，而不是空的谷歌地图的灰色图像。

希望以后能对其他人有所帮助。

【参考方案9】：

使用下面的脚本

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

            init();

        );

【参考方案10】：

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