Javascript Bootstrap 选项卡中的 Google 地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13635903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map in Bootstrap Tab
提问by julio
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.
我试图让一个谷歌地图出现在一个普通的 Bootstrap 选项卡中。我直接从 Bootstrap 文档中构建了一个小提琴，Gmap 脚本与 Google 推荐的完全一样。
I am dumping the mapobject to console.dir and it has been initialized properly. In earlier projects I'd been able to display maps in tabs using the resizefunction-- but it doesn't seem to work with Bootstrap.
我正在将map对象转储到 console.dir 并且它已正确初始化。在早期的项目中，我已经能够使用该resize功能在选项卡中显示地图——但它似乎不适用于 Bootstrap。
Has anyone gotten this working?
有没有人得到这个工作？
Here's the generic jsfiddle-- http://jsfiddle.net/B4zLe/4/
这是通用的 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:
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>
采纳答案by Bubbles
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')
- resize：当div改变大小时，开发者应该在地图上触发这个事件：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.
换句话说，调整大小不会做任何花哨的事情，例如将地图调整到窗口的大小，而只会将其调整到它所在的容器 - 在这种情况下，是“map_canvas”div。然而，这个 div 没有维度，所以地图的大小为零。
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:
由于您添加了一些侦听器以确保地图将更改为其父级的大小，因此这是一个非常简单的解决方法 - 只需添加一些代码将父级 div 修改为所需的大小，并且地图将调整为它的大小。例如：
$("#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.
将其大小调整为 400x400。这是一个示例，您应该可以将其更改为您想要的任何内容。
回答by apb
Updated answer for Boostrap 3:
Boostrap 3 的更新答案：
$("a[href='#my-tab']").on('shown.bs.tab', function(){
google.maps.event.trigger(map, 'resize');
});
Note that you're selecting the link to the tab, not the tab itself.
请注意，您选择的是选项卡的链接，而不是选项卡本身。
回答by cevatasln
dont use .tab-content > .tab-pane {display: none}
use this
不要使用.tab-content > .tab-pane {display: none}
使用这个
.tab-content > .tab-pane {
display: block;
height:0;
overflow:hidden;
}
.tab-content > .active {
display: block;
height:auto;
}
回答by noocom
Resize the map when tabs is shown
显示选项卡时调整地图大小
$('#myTab a[href="#profile"]').on('shown', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
回答by Myghty Draxx
I have the problem also with Google Maps with Bootstrap 3, but i solved the problem with tiny trick base on Andy Bcode :
我也有使用 Bootstrap 3 的 Google Maps 的问题，但我用基于Andy B代码的小技巧解决了这个问题：
var cl=0;
$("a[href='#maptab']").on('shown.bs.tab', function(){
cl++;
if(cl == 1){ // this is to prevent map initialized twice or more
initialize();
}
else{
//do nothing
}
});
well.. atleast its work for me :)
好吧..至少它对我有用:)
回答by Swaranan Singha Barman
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');
});
$("#map_canvas").css("height", 400);
});
});
回答by guido _nhcol.com.br_
problem still persists in 2016, remove the google DOM handler and call the initialize() function with the jQuery "show" trigger as already written above. The map then is loaded on click on the TAB
问题在 2016 年仍然存在，删除 google DOM 处理程序并使用上面已经写过的 jQuery“show”触发器调用 initialize() 函数。然后点击选项卡加载地图
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e)
{
initialize();
});
回答by lohe
Still having problems with Bootstrap 3.3.7, jquery 1.11.3 and tabs. Everything works fine until you try to put map into tab that on load is first hidden. Then you get map loaded and everything should work, but you see only gray (or any other color, not sure) area of map. You can do everything there but you cannot see the map itself. On drag inside the map, you may be able to see SOME things, but in general - blank map.
Bootstrap 3.3.7、jquery 1.11.3 和选项卡仍然存在问题。一切正常，直到您尝试将地图放入加载时首先隐藏的选项卡中。然后你加载地图，一切都应该工作，但你只能看到地图的灰色（或任何其他颜色，不确定）区域。你可以在那里做任何事情，但你看不到地图本身。在地图内拖动时，您可能会看到一些东西，但通常 - 空白地图。
Option 1- you are able to see the map when you resize your window for a moment. But there is downfall as well - as soon as you change tab, it disapperas again.
选项 1- 当您暂时调整窗口大小时，您可以看到地图。但是也有垮台 - 一旦您更改标签，它就会再次消失。
Option 2- you can put map on first tab and be done with it.
选项 2- 您可以将地图放在第一个选项卡上并完成它。
Option 3- you can just make a code to "resize" the map (like shown previously). BUT there I ran into the problem - that does not ALWAYS work. At least it did not work for me:
选项 3- 您只需编写一个代码来“调整”地图的大小（如前所示）。但是在那里我遇到了问题 - 这并不总是有效。至少它对我不起作用：
.on("shown", function(){})
.on("shown.bs.tab", function(){});
.on("show.bs.tab", function(){});
...
Pretty much any variation did not work. I managed to make it work on FIRST time tab click by using link ID not href comparision, but as soon as I clicked on another tab and back again, gray map again ... I was like - seriously!?
几乎任何变化都不起作用。我设法通过使用链接 ID 而不是 href 比较，使其在第一次标签点击时工作，但是一旦我点击另一个标签并再次返回，灰色地图再次......我就像 - 真的！？
Finally, I came up with solution: on that specific tab click (by id, I recommend), it makes all the necessary things. That means following - each time you click somewhere else (other links or tabs) and back to map tab, it will reload that map (and therefor may be slow a bit - depends on internet), but at least I got map, not empty gray image of google maps.
最后，我想出了解决方案：在那个特定的选项卡上点击（我推荐通过 id），它可以完成所有必要的事情。这意味着跟随 - 每次你点击其他地方（其他链接或标签）并返回地图标签时，它会重新加载该地图（因此可能会有点慢 - 取决于互联网），但至少我得到了地图，而不是空的谷歌地图的灰色图像。
Hope that helps someone else in the future.
希望将来能帮助别人。
回答by Shridhar
use below script
使用下面的脚本
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
init();
});
回答by Hercules S.
Absolutely wonderful solution by cevatasln. Me too I have used all possible jQuery and Javascript solutions, none worked! If you want to target specific taband using dynamic gallery or somethingthis will work for you
cevatasln绝对精彩的解决方案。我也是，我已经使用了所有可能的 jQuery 和 Javascript 解决方案，但没有一个奏效！如果您想定位特定选项卡并使用动态图库或其他东西，这对您有用
.tab-content > #tab5.tab-pane {
display: block;
height:0;
max-height:0;
overflow:hidden;
}
.tab-content > #tab5.active {
display: block;
height:auto;
max-height: 100%;
}
