javascript - Bootstrap 选项卡搞砸了谷歌地图

Question

我有一个位于引导选项卡内的 map 。当我转到该选项卡时，我会启动 map

$('.locations').click(function(){
    setTimeout(initMap(),1500);
});

这是初始化函数

function initMap() {

    var myLatlng = new google.maps.LatLng(10.0,5.0);

    var myOptions = {
       zoom: 2,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
       }

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
        google.maps.event.addListener(map, 'click', function(event) {

    });

  }

当我第一次访问该选项卡时， map 加载正常。但如果我单击另一个选项卡，然后返回。它只显示一个空白的灰色屏幕(仍然带有 Google Logo ，这很奇怪)

我过去曾发生过这种情况，但通常它会完全消失或调整大小，我必须重新调整。但这一次， map 似乎并没有完全消失。

它就在那里，只是灰色的。几乎就好像它只是放大了很远，而且我无法取消缩放。当我再次单击该选项卡时，如何从头开始重新初始化它，或者让它返回？

现在，每次我单击该选项卡时都会触发 init 函数。如果我做到了，它就不会这样做，之后它仍然显示灰屏。你会认为初始化后就可以了？？？我不明白。

Answer 1

我建议删除用于初始化 Google map 的 setTimeout 函数，因为无法保证 Google Maps API 在指定的延迟后加载。 Google Maps API 提供了自己的方法来控制是否加载 Google map 。在以下示例中:

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

页面加载完成后，Google map 就会被初始化。

这是一个工作示例，演示了如何在 bootstap 选项卡中初始化 map 。

示例

function initMap() {
  var myLatlng = new google.maps.LatLng(10.0, 5.0);

  var myOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  
  //google.maps.event.trigger(map, 'resize');
}


$(function(){


  $("a[href='#locations']").on('shown.bs.tab', function(e) {
      initMap();
  });


});

#map {
        height: 480px;
        width: 640px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <script async defer src="https://maps.googleapis.com/maps/api/js"></script>


<div>


<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#locations" data-toggle="tab">Locations</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    HOME
  </div>
  <div class="tab-pane fade" id="locations">
    <div id="map"></div>
  </div>
</div>