谷歌地图和引导标签，而是与第三方地图生成

Question

我知道，GoogleMap has some glitch with Bootstrap hidden tabs和触发大小调整是必需的（google.maps.event.trigger(map, 'resize');）

我使用的是第三方Map Generator的易用性，以及当然，我有那些毛刺过：简而言之，谷歌地图不显示，即使引导隐藏选项卡上（它只是不错位：它不会显示在所有）：这里是

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!--Google Map Generator scripts--> 
 
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284"></script> 
 
<script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&amp;width=100%&amp;height=200px"></script> 
 

 
<!--Core JS--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">Map</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home"> 
 
     <p>This is the original shown tab: Map pane is hidden, so Google Map doesn't work well</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="map"> 
 
     <p>The map doesnt even show (except the map frame)</p> 
 
     <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div> 
 
    </div> 
 
    </div> 
 
</div>

与以往google.maps.event.trigger(map, 'resize');地图显示，但...失调：这样

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!--Google Map Generator scripts--> 
 
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284"></script> 
 
<script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&amp;width=100%&amp;height=200px"></script> 
 

 
<!--Core JS--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $('[href="#map"]').on('shown.bs.tab', function() { 
 
     google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize'); 
 
    }); 
 
}); 
 
</script> 
 

 
<div class="container"> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">Map</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home"> 
 
     <p>This is the original shown tab: Map pane is hidden, so Google Map doesn't work well</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="map"> 
 
     <p>The map is here, but misaligned...</p> 
 
     <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div> 
 
    </div> 
 
    </div> 
 
</div>

所以：任何想法如何使这项工作吗？

Answer 1

你应该恢复地图中心，触发后， '调整'，即改变你对 'shown.bs.tab' 的方法：

$(document).ready(function(){ 
    $('[href="#map"]').on('shown.bs.tab', function() { 
     var mapCenter = map65305168032a400b9698f5c2fcba4477.getCenter(); 
     google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize'); 
     map65305168032a400b9698f5c2fcba4477.setCenter(mapCenter); 
    }); 
});  

全片段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!--Google Map Generator scripts--> 
 
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284"></script> 
 
<script src="//www.map-generator.org/map/iframejs/65305168-032a-400b-9698-f5c2fcba4477?key=AIzaSyA222wozVyNudm3i0A2Tr_Vlmh_RipQ284&amp;width=100%&amp;height=200px"></script> 
 

 
<!--Core JS--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $('[href="#map"]').on('shown.bs.tab', function() { 
 
    console.log(map65305168032a400b9698f5c2fcba4477.getCenter().lat()); 
 
     var mapCenter = map65305168032a400b9698f5c2fcba4477.getCenter(); 
 
     google.maps.event.trigger(map65305168032a400b9698f5c2fcba4477, 'resize'); 
 
     map65305168032a400b9698f5c2fcba4477.setCenter(mapCenter); 
 
    }); 
 
}); 
 
</script> 
 

 
<div class="container"> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#map" aria-controls="map" role="tab" data-toggle="tab">Map</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home"> 
 
     <p>This is the original shown tab: Map pane is hidden</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="map"> 
 
     <p>The map is here, and centered after shown...</p> 
 
     <div id="mapid-65305168-032a-400b-9698-f5c2fcba4477"></div> 
 
    </div> 
 
    </div> 
 
</div>