Question

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

当我将代码放入Tab中时，为什么第二个选项卡不会加载，但是当我从选项卡中删除时，这两个地图都可以正常工作。

如何解决此问题？

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

Answer 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

多个Google地图无法与Bootstrap 3标签一起使用

1 个答案: