Bootstrap 选项卡中的 Google 地图 [英] Google Map in Bootstrap Tab

问题描述

我正在尝试让 Google 地图出现在普通的 Bootstrap 选项卡中.我构建了一个直接取自 Bootstrap 文档的小提琴，Gmap 脚本与 Google 推荐的非常相似.

我正在将 map 对象转储到 console.dir 并且它已正确初始化.在早期的项目中，我可以使用 resize 功能在选项卡中显示地图 - 但它似乎不适用于 Bootstrap.

有人用过吗?

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

添加代码

JAVASCRIPT:

var map;jQuery(函数($){$(document).ready(function() {var latlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = {变焦:8，中心:latlng，mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);控制台.目录(地图)；google.maps.event.trigger(map, 'resize');$('a[href="#profile"]').on('shown', function(e) {google.maps.event.trigger(map, 'resize');});});});

HTML:

<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">地图</a></li><div id="myTabContent" class="tab-content"><div class="tab-pane淡入活动" id="home"><p>您可能没有听说过原始牛仔布，它们是 Austin 牛仔短裤.Nesciunt 豆腐 stumptown aliqua，复古合成大师净化.小胡子陈词滥调，威廉斯堡卡尔斯素食赫尔维蒂卡.Reprehenderit 屠夫复古 keffiyeh 捕梦网合成器.Cosby 毛衣 eu banh mi，qui irure terry richardson ex squid.Aliquip 鼠尾草 iphone.Seitan aliquip quis 开衫美国服装，butcher voluptate nisi qui.</p>
<div class="tab-pane淡入淡出" id="profile"><div id="map_canvas"></div>

解决方案

您对调整大小"事件的强大程度有点过于乐观了.来自文档:

• resize:当div改变大小时，开发者应该在地图上触发这个事件:google.maps.event.trigger(map, 'resize')

换句话说，调整大小不会做任何花哨的事情，例如将地图调整到窗口的大小，而只会将其调整到它所在的容器 - 在这种情况下，map_canvas"div.然而，这个 div 没有维度，所以地图的大小为零.

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

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

将其大小调整为 400x400.这是一个示例，您应该可以将其更改为您喜欢的任何内容.

I'm trying to get a Google Map to appear in a vanilla Bootstrap tab. I built a fiddle taken directly from the Bootstrap docs, with the Gmap script pretty much exactly like Google recommends doing it too.

I am dumping the map object to console.dir and it has been initialized properly. In earlier projects I'd been able to display maps in tabs using the resize function-- but it doesn't seem to work with Bootstrap.

Has anyone gotten this working?

Here's the generic jsfiddle-- http://jsfiddle.net/B4zLe/4/

EDIT: adding code

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>

解决方案

You're a little overoptimistic in how powerful the "resize" event is. From the documentation:

• resize: Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize')

In other words, resize won't do anything fancy like size the map to the window, but will only size it to the container it's in - in this case, the "map_canvas" div. However, this div has no dimensions, so the map has zero size.

Since you added some listeners to ensure that the map will change to the size of it's parent, this is a pretty easy fix - just add some code to modify the parent div to the desired size, and the map will resize to it. For example:

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

will size it to 400x400. Here's an example, you should be able to change it to whatever you'd like.

这篇关于Bootstrap 选项卡中的 Google 地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！