Twitter Bootstrap和谷歌地图

我有一个导航栏和100％x 100％谷歌地图在我的应用程序。我想用不同的过滤器在右侧添加一个侧栏。在右侧添加它的原因是因为在较小的屏幕上有更好的体验，因为正确的内容被推到下面。Twitter Bootstrap和谷歌地图

地图呈现全屏流体（％）值时，我只是添加了地图的最后一个导航栏格后，像这样：

地图可见：

<div class="navbar"> 
    <nav bar stuff......> 
</div> 
<div id="map-canvas"></div>

地图是不可见如果我尝试将其添加到跨度内以控制其大小并添加侧栏。

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9"> 
      <div id="map-canvas"></div> 
     </div> 
     <div class="span3"> 
      <div class="well sidebar-nav"> 
       <ul class="nav nav-list"> 
        <li class="nav-header">Sidebar</li> 
        <li class="active"><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>

我不想给地图添加一个固定值，因为它破坏了流体的目的。

在此先感谢您提供有关如何使地图在容器流体内可见的任何提示。

来源

2012-03-09 Epalissad

这样的布局看起来不错，也许你已经定义在你的CSS尺寸，边框，保证金或填充值？如果没有，你可以尝试删除你的列表中的“well”类，如果这是问题，只需将一个内部包装器div写为“nav nav-list”的子元件。 – 2012-03-09 12:32:10

在此处得到答案。地图的高度设置为零。链接回答。 https://github.com/twitter/bootstrap/issues/2475 – Epalissad 2012-03-10 13:10:55

发布我发现之前的评论答案，而是使之更加醒目，这里就是答案：https://github.com/twbs/bootstrap/issues/2475

您必须添加将手动设置地图画布高度一个JavaScript回调例如，当窗口被调整大小时。

$(window).resize(function() { 
    var h = $(window).height(), 
     offsetTop = 60; // Calculate the top offset 

    $('#map-canvas').css('height', (h - offsetTop)); 
}).resize();

来源

2012-04-28 09:07:53 Epalissad

到github的链接不再有效 – 2013-07-30 18:08:07

[Bootstrap 3 RC1发布时引入的新回购版本]（http://blog.getbootstrap.com/2013/07/ 27 /自举-3- RC1 /） – dafyk 2013-08-02 12:25:58

我已经完成了。

我第一次尝试与你的问题相同。自举内容标签中的GPS地图。而我只是通过类似这样的东西加载或初始地图与选项卡点击事件。

var map = undefined; 
var marker = undefined; 
var position = [13.821805500000002, 100.84968549999999]; 
var latlng; 

function initialize() { 

    latlng = new google.maps.LatLng(position[0], position[1]); 
    var myOptions = { 
     zoom: 11, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     draggable: true, 
     title: "Your current location!" 
    }); 

    google.maps.event.addListener(marker, 'drag', function() { 
     $('#txtlat').val(marker.position.lat()); 
     $('#txtlng').val(marker.position.lng()); 
    } 
    ); 
} 

    $(document).ready(function() { 
      $("div.tabbable ul.nav a[href=#gps_tab]").bind('click', function() { 
        initialize(); 
       $("#map_canvas").show(); 
      }); 
    });

来源

2014-12-19 10:09:48 TJKing

Twitter Bootstrap和谷歌地图

回答

相关问题