谷歌地图和引导选项卡，但使用第三方地图生成器

Question

我知道谷歌地图在引导隐藏标签上有一些故障，需要触发调整大小(google.maps.event.trigger(map, 'resize');(

为了便于使用，我正在使用 3rd 方地图生成器，当然我也有这些故障：简而言之，Google 地图甚至没有显示在 Bootstrap 隐藏选项卡上(它只是没有对齐：它根本没有显示(：这里是

<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

您应该在触发"调整大小"后恢复地图中心，即更改您在"display.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>