JavaScript – “Bootstrap”选项卡中的Google Map

我试图让Google Map显示在一个香草Bootstrap标签中.我建立了一个直接从Bootstrap文档中获取的小提琴,Gmap脚本与Google建议的一样.

我将映射对象转储到console.dir,并且已经被正确初始化.在早期的项目中,我可以使用resize函数在tab中显示地图,但它似乎不适用于Bootstrap.

有没有人得到这个工作?

这是通用的jsfiddle – http://jsfiddle.net/B4zLe/4/

编辑:添加代码

JAVASCRIPT:

var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
    });
});

HTML:

<div>
<div class="bs-docs-example">
    <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Map</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <div id="map_canvas"></div>   
    </div>
</div>
您对“调整大小”事件的强大程度有点过分乐观.从 the documentation:

> resize:当div更改大小时,开发人员应该在地图上触发此事件:google.maps.event.trigger(map,’resize’)

换句话说,调整大小不会像地图到窗口的大小一样,只会把它调整到它所在的容器(在这种情况下是“map_canvas”).但是,这个div没有维度,所以地图的大小是零的.

由于您添加了一些监听器以确保地图将更改为其父级的大小,这是一个非常简单的修复 – 只需添加一些代码将父div修改为所需的大小,并且映射将调整大小.例如:

$("#map_canvas").css("width", 400).css("height", 400);

将其大小为400×400. Here’s an example,你应该可以把它改变成你想要的.

相关文章
相关标签/搜索