Question

我知道GoogleMap has some glitch with Bootstrap hidden tabs和触发调整大小是必需的（<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <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&width=100%&height=200px"></script>  <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">  <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>  <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>）

我使用第三方Map Generator是为了方便使用，当然我也有这些故障：简而言之，Google地图甚至没有显示在Bootstrap隐藏标签上（它是＆＃39; s只是没有未对齐：它根本没有显示）：这里是

＆＃13;

google.maps.event.trigger(map, 'resize');

＆＃13;

使用之前的<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <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&width=100%&height=200px"></script>  <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">  <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>  <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>，地图会显示，但是......未对齐：像这样

＆＃13;

update Users_Data u
inner join Temp t on
    u.Listing_id = t.Listing_id
set u.Keywords = t.Keywords

＆＃13;

那么：请知道如何让这项工作好吗？

Answer 1

您应该在触发＆＃39;调整大小后恢复地图中心，即更改您的on＆＃39; shown.bs.tab＆＃39;方法：

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

完整摘录：

＆＃13;

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

＆＃13;

Google地图和Bootstrap标签，但带有第三方地图生成器

1 个答案: