Twitter 引导程序和谷歌地图答案

【问题标题】：Twitter Bootstrap & Google MapsTwitter 引导程序和谷歌地图
【发布时间】：2012-03-09 12:23:14
【问题描述】：

我的应用中有一个导航栏和 100% x 100% 谷歌地图。我想在右侧添加一个带有不同过滤器的侧边栏。将其添加到右侧的原因是因为将正确的内容推送到下方，因此在较小的屏幕上的体验会更好。

当我在最后一个导航栏 div 之后添加地图时，地图会以流体 (%) 值呈现全屏，如下所示：

地图可见：

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

我不想在地图上添加固定值，因为它违背了流动的目的。

提前感谢有关如何使地图在容器流体中可见的任何提示。

【问题讨论】：

这个布局看起来不错，也许您在 CSS 中定义了大小、边框、边距或内边距值？如果没有，您可以尝试删除列表中的“well”类，如果这是问题所在，只需编写一个内部包装 div 作为 nav nav-list 的子级
在这里得到了答案。地图的高度设置为零。链接回答。 github.com/twitter/bootstrap/issues/2475

标签： css google-maps twitter-bootstrap

【解决方案1】：

之前将我找到的答案发布为评论，但为了使其更明显，这里是答案：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();

【讨论】：

New repo introduced with release of Bootstrap 3 RC1

【解决方案2】：

我已经做到了。

我第一次尝试与您的问题相同。引导内容选项卡中的 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();
           });
    });

【讨论】：