Question

我的应用中有一个导航栏和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>

我不想在地图上添加固定值，因为它会破坏流体的目的。

提前感谢我提供有关如何在容器内部显示地图的任何提示。

Answer 1

发布我之前发现的评论答案，但为了使其更加明显，以下是答案：https://github.com/twbs/bootstrap/issues/2475

您必须添加一个手动设置高度的javascript回调例如，调整窗口大小时的map-canvas。

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

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

Answer 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();
           });
    });

Twitter Bootstrap＆amp;谷歌地图

2 个答案: