引导标签搞砸了谷歌地图

Question

我有一张位于引导标签内的地图。 当我转到该标签时，我会启动地图

$('.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) {

    });

  }

第一次访问标签时，地图加载正常。但如果我点击另一个标签，然后返回。它只显示一个空白的灰色屏幕（仍然带有Google徽标，这很奇怪）

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

它在那里，它只是灰色。几乎就像它刚刚放大了一样，我无法取消它。当我再次点击标签时，如何从头开始重新初始化它，或者让它回来？

现在，每次单击选项卡时都会触发init函数。如果我这样做它不会这样做，它仍然显示灰色屏幕后。在初始化之后你会想到它会好吗???我不明白。

Answer 1

我建议删除setTimeout初始化Google地图的功能，因为无法保证Google Maps API在指定的延迟后加载。 Google Maps API提供了自己的方法来控制是否加载了谷歌地图。在以下示例中：

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

google地图在页面加载完成后即被初始化。

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

示例

＆＃13;

＆＃13;

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();
  });


});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

修改你的超时以传递initMap函数作为回调，如：

setTimeout(initMap,1500);

目前，您在点击时立即呼叫initMap()，并且根本没有使用超时。