Bootstrap中Navbar中的谷歌地圖3

我剛剛從Bootstrap 2遷移到Bootstrap 3.我知道在Bootstrap中顯示Google地圖非常棘手，我花了一段時間纔將它與Bootstrap 2配合使用，但現在我又迷了路。Bootstrap中Navbar中的谷歌地圖3

有關於此主題的相關問題，請參閱下面的鏈接，但一看到這個問題似乎多層，作爲答案千差萬別：

Showing a Google Map in a modal created with Twitter Bootstrap

Bootstrap 3.0 and Google maps javascript API V3 styling

我覺得我的代碼是非常標準：

<nav class="navbar navbar-default navbar-fixed-bottom visible-xs" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#lowerNavBar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse visible-xs" id="lowerNavBar"> 
     <ul class="nav navC navbar-nav"> 
      <li id ="listTab" class="active"><a href="#listTabContent" data-toggle="tab">List</a></li> 
      <li id ="mapTab"><a href="#mapTabContent" data-toggle="tab">Map</a></li> 
     </ul> 
    </div> 
</nav> 

<div class="tab-content"> 
    <div class="tab-pane active" id="listTabContent"> 
     <div class="container" id="postsGoHere"> 
     </div> 
    </div> 
    <div class="tab-pane" id="mapTabContent"> 
     <div id="mapCanvas" class="google-map-canvas"></div> 
    </div> 
</div>

所以，我的問題是：爲了達到地圖正確顯示的點，人們必須做些什麼？我嘗試了以上兩種解決方案中的絕緣和一起使用，但沒有提供。我目前在屏幕左上角顯示部分地圖的'灰色框'結果。

來源

2013-11-02 Michael Junk

最後，我發現一些作品：

$("#mapTab").on("shown.bs.tab", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
});

來引導3引導2之間的區別在於，事件需要從「顯示」爲「shown.bs.tab」改變。

來源

2013-11-03 14:56:13

$(".navbar-toggle").on("click", function() {  
    setTimeout(
     function() 
     { 
     initialize(); 
     }, 500); 
});

來源

2016-04-21 11:53:21

Bootstrap中Navbar中的谷歌地圖3

回答

相關問題