Bootstrap 选项卡中的多个 Google 地图

Posted 2023-05-09

【中文标题】Bootstrap 选项卡中的多个 Google 地图

【英文标题】：Multiple Google Maps within Bootstrap Tabs

【发布时间】：2015-01-30 01:09:42

【问题描述】：

我有一个引导选项卡结构，每个选项卡内都有一个谷歌地图 iframe。第一个选项卡的 iframe 看起来不错，但其他选项卡看起来未缩放且未居中。这与 iframe src 代码无关，因为我尝试用第二个和其他替换第一个；第一个总是很好。

我看到了一些解决方案，但没有一个对我有用；我不是通过 javascript 生成地图（我认为这会有点复杂，因为有 11 个选项卡，这意味着要与 JS 分开触发 11 个地图）。

我怎样才能让它们看起来像第一个？

<ul id="tablist" class="nav mt20" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#location1" aria-controls="location1" role="tab" data-toggle="tab">EDİRNE</a>
                    </li>
                    <li role="presentation">
                        <a href="#location2" aria-controls="location2" role="tab" data-toggle="tab">İSTANBUL</a>
                    </li>
                    <li role="presentation">
                        <a href="#location3" aria-controls="location3" role="tab" data-toggle="tab">İSTANBUL</a>
                    </li>
                </ul>

<div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="location1">
                        <h2>Edirne</h2>

                        <div class="map">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1490.0295508854501!2d26.554026500000006!3d41.676066999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14b32f70d8d07e91%3A0x66cefa22bb2159ed!2sTahmis+Sk%2C+Sabuni+Mh.%2C+22030+Edirne%2C+T%C3%BCrkiye!5e0!3m2!1str!2s!4v1417465718288"   frameborder="0" style="border:0"></iframe>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="location2">
                        <h2>İstanbul / Ümraniye</h2>

                        <div class="map">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1505.0782255145343!2d29.11706899999999!3d41.021833000000015!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8c2a634cb7d%3A0x2a689ffda344dbd3!2zQWxlbWRhxJ8gQ2QsIDM0Mzk4IMSwc3RhbmJ1bCwgVMO8cmtpeWU!5e0!3m2!1str!2s!4v1417467819597"   frameborder="0" style="border:0"></iframe>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="location3">
                        <h2>Buyaka</h2>

                        <div class="map">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6019.895047795627!2d29.126492999999996!3d41.02640399999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8dbf23cc11f%3A0x726fb77d4e9c67c5!2sBuyaka!5e0!3m2!1str!2s!4v1417468135827"   frameborder="0" style="border:0"></iframe>
                        </div>
                    </div>
                </div>

【参考方案1】：

可能的方法：

第一次激活标签时，通过js创建iframe（并不复杂）。

标记： 将 iframe-src 存储在 div.map 的属性中，例如而不是：

<div class="map">
  <iframe src="https://www.google.com/......."></iframe>
</div>

只有这个：

<div class="map" data-map="https://www.google.com/......." ></div>

创建 iframe 的脚本：

$(function()
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
  var that=$($(e.target).attr('href')).find('.map');
  if(!that.find('iframe').length) 
    that.append($('<iframe/>',src:that.data('map'))
                  .css(height:'300px',width:'100%',border:'none'));
  
).first().trigger('shown.bs.tab');
);

演示：http://jsfiddle.net/doktormolle/x8gkx64k/

【讨论】：

很棒的答案。我一直在使用另一种 jQuery，但这要好得多。