多个 Google 地图无法与 Bootstrap 3 选项卡一起使用

Posted 2023-05-08

【中文标题】多个 Google 地图无法与 Bootstrap 3 选项卡一起使用

【英文标题】：Multiple Google Maps won't work with Bootstrap 3 Tabs

【发布时间】：2018-03-01 20:16:32

【问题描述】：

我得到了这段代码，但它无法在 Bootstrap 3 Tabs 上运行，而且似乎无法弄清楚问题所在！感觉就像 Tabs javascript 是问题，但控制台没有显示任何错误！

我不知道为什么当我将代码放在选项卡中时第二个选项卡没有加载，但是当我从选项卡中删除时两个地图都可以工作。

我该如何解决这个问题？

CODEPEN with Tab: https://codepen.io/anon/pen/BwzBym

这是 html：

<div class="row">
  <div class="col-sm-3">
    <h5>Some Text here</h5>
  </div>
  <div class="col-sm-9">
    <div class="contactus">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#registered">Office1</a></li>
        <li><a data-toggle="tab" href="#branch">Office2</a></li>
      </ul>

      <div class="tab-content">
        <div id="registered" class="tab-pane fade in active">
          <div id="gmap_canvas" style="height:300px;"></div>
        </div>
        <div id="branch" class="tab-pane fade">
          <div id="gmap_canvas2" style="height:300px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript：

function init_map() 
        var myOptions = 
            zoom: 10,
            styles: [
                stylers: [
                    saturation: -50
                ]
            ],
            center: new google.maps.LatLng(22.676028, 77.098720),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var myOptions2 = 
            zoom: 10,
            styles: [
                stylers: [
                    saturation: -50
                ]
            ],
            center: new google.maps.LatLng(22.843651, 80.949111),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        map2 = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions2);

        //FIRST MARKER

        marker1 = new google.maps.Marker(
            map: map,
            position: new google.maps.LatLng(22.676028, 77.098720)
        );
        infowindow1 = new google.maps.InfoWindow(
            content: 'Office 1'
        );
        google.maps.event.addListener(marker1, 'click', function() 
            infowindow1.open(map, marker1);
        );
        infowindow1.open(map, marker1);


        //SECOND MARKER

        marker2 = new google.maps.Marker(
            map: map2,
            position: new google.maps.LatLng(22.843651, 80.949111)
        );
        infowindow2 = new google.maps.InfoWindow(
            content: 'Office 2'
        );
        google.maps.event.addListener(marker2, 'click', function() 
            infowindow2.open(map2, marker2);
        );
        infowindow2.open(map2, marker2);

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

当我删除标签脚本附带的 DIV 时，它的工作方式如下所示：

Working CODEPEN without Tab: https://codepen.io/anon/pen/RLRbrp

【问题讨论】：

我知道这不正确。只需将活动添加到您的分支选项卡即可fiddle here

你能把它作为答案发布吗？我想说它以最优雅的方式解决了它！

【参考方案1】：

未显示的选项卡是尚未呈现的 div。您需要使用 API 中的 resize 函数触发隐藏选项卡地图的呈现：将以下内容添加到您的代码中 - 它检查显示选项卡的标题并触发相应地图的 调整大小：

$('.nav-tabs a').on('shown.bs.tab', function(event)
   if( $(event.target).text() == 'Office2')
       
         google.maps.event.trigger(map2, 'resize');
         map2.setCenter( new google.maps.LatLng(22.843651, 80.949111) );
       
   else if( $(event.target).text() == 'Office')
       
         google.maps.event.trigger(map, 'resize');
         map.setCenter( new google.maps.LatLng(22.676028, 77.098720) );
       
);

工作代码笔：https://codepen.io/anon/pen/NarKyO

【讨论】：

不错！如何在第二张地图中居中对齐标记？它目前将标记扔到左上角。

查看编辑。为了防止这种副作用，只需再次设置中心。