0

我刚刚从 Bootstrap 2 迁移到 Bootstrap 3。我知道在 Bootstrap 中显示谷歌地图很棘手，我花了一段时间才让它与 Bootstrap 2 一起工作，但现在我又迷路了。

有关于这个主题的相关问题，请参见例如以下链接，但可以看到问题似乎是多层次的，因为答案差异很大：

在使用 Twitter Bootstrap 创建的模式中显示 Google 地图

Bootstrap 3.0 和 Google 映射 javascript API V3 样式

我认为我的代码非常标准：

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

所以，我的问题是：要达到地图正确显示的地步，究竟需要做什么？我在绝缘和一起尝试了上述两种解决方案，但没有可用。我目前正在获得“灰色框”结果，屏幕左上角显示了部分地图。

4

2 回答 2

2

最后我发现了一些有用的东西： 

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

Bootstrap 2 和 Bootstrap 3 的区别在于需要将事件从“shown”更改为“shown.bs.tab”。

于 2013-11-03T14:56:13.653 回答
0 
$(".navbar-toggle").on("click", function () {       
    setTimeout(
      function() 
      {
        initialize();
      }, 500);
});
于 2016-04-21T11:53:21.507 回答