Google 地图和 jQuery 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3014156/
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 Maps and jQuery Tabs
提问by Dom
I have slight problem with Google maps included in simple jQuery Tabs.
我对包含在简单 jQuery 标签中的 Google 地图有一些小问题。
Below I pasted the code:
下面我粘贴了代码：
jQuery:
jQuery：
$(document).ready(function() {
//Default Action
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
Here is the HTML for the tabs:
这是选项卡的 HTML：
<div class="bluecontainer">
<ul class="tabs">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<li><a href="#tab4">Tab4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Tab1</h2>
</div>
<div id="tab2" class="tab_content">
<h2>Tab2</h2>
</div>
<div id="tab3" class="tab_content">
<div>
google Map
</div>
</div>
<div id="tab4" class="tab_content">
<h2>Tab4</h2>
</div>
</div>
</div>
I really don't know what to do to. Is that a general problem with google maps or there is something with my tabs? But they are working just fine with everything else.
我真的不知道该怎么办。这是谷歌地图的普遍问题还是我的标签有问题？但他们在其他一切方面都做得很好。
Thank you for your help in advance
提前谢谢你的帮助
回答by Dom
I have solved the problem.
我已经解决了这个问题。
changed hide() in jQuery to css.visibility, so the tabs looks like this.
将 jQuery 中的 hide() 更改为 css.visibility，因此选项卡看起来像这样。
$(document).ready(function() {
//Default Action
$(".tab_content").css({'visibility':'hidden' , 'position':'absolute'});
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").css({'visibility':'visible' , 'position':'static'});
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").css({'visibility':'hidden' , 'position':'absolute'});
var activeTab = $(this).find("a").attr("href");
$(activeTab).css({'visibility':'visible' , 'position':'static'});
return false;
});
});
Everything works just fine.
一切正常。
回答by harry
Bootstrap3 : https://github.com/twbs/bootstrap/issues/2330
Bootstrap3：https: //github.com/twbs/bootstrap/issues/2330
$('a[href="#edit_tab_map"]').on('shown.bs.tab', function(e)
{
google.maps.event.trigger(map, 'resize');
});
回答by Andy
I went with a different approach - initialize the map after the tab is activated. Here's my code:
我采用了不同的方法 - 在激活选项卡后初始化地图。这是我的代码：
//Default Action
jQuery(".tab_content").hide(); //Hide all content
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab_content:first").show(); //Show first tab content
//On Click Event
jQuery("ul.tabs li").click(function() {
jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
jQuery(".tab_content").hide(); //Hide all tab content
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
jQuery(activeTab).fadeIn(); //Fade in the active content
if(activeTab == '#location_tab') {
initialize();
}
return false;
});
Make sure that the tab with your map's ID matches with the script's. In my case its "location_tab".
确保带有地图 ID 的选项卡与脚本的匹配。就我而言，它是“location_tab”。
回答by Chad
Initialising the map when the tab is opened is definitely the way to go. If you try to initialise the map on a hidden div, then it will fail to display. Whatever function you have that 'shows' your div, use that function to initialise the map AFTER the div has been shown.
打开选项卡时初始化地图绝对是要走的路。如果您尝试在隐藏的 div 上初始化地图，则它将无法显示。无论您拥有“显示”div 的任何函数，都可以在显示 div 后使用该函数初始化地图。
if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) {
LoadGoogleMap();
maploaded = true;
}
Once the map has been loaded, you can safely hide or show the div again without any problems, so it's worth adding a flag to check whether it's already been loaded.
加载地图后，您可以安全地再次隐藏或显示 div，没有任何问题，因此值得添加一个标志来检查它是否已经加载。
回答by Constantine M
Google maps does not work well when you hide elements like jquery tabs does when you change tabs.
当您在更改选项卡时隐藏像 jquery 选项卡那样的元素时，Google 地图无法正常工作。
The simplest solution is to bind google map initialization function to the tabsshow event of the jquery tab object
最简单的解决方法是将google map初始化函数绑定到jquery tab对象的tabsshow事件
$("#tabs").bind( "tabsshow", function(event, ui) {
if(ui.index == 4) { //my map tab has index 4. This will avoid initialization for other tabs
initialize(); //google map initialization code
}
});
This solution works with any other plugins which depends on width and hide of a DOM element such as the jquery masonry plugin.
此解决方案适用于任何其他依赖于 DOM 元素的宽度和隐藏的插件，例如 jquery masonry 插件。
回答by Fuzz
If you are still struggling to get this right like I was, Try this.
如果你仍然像我一样努力做到这一点，试试这个。
var hasLoadedMap = false;
$( "#tabs" ).tabs({
activate: function( event, ui ) {
//console.log(ui.newTab.context.id);
if(!hasLoadedMap && ui.newTab.context.id == 'ui-id-4') { //my map tab has index 4. This will avoid initialization for other tabs
console.log(ui.newTab.context.id);
initialize(); //google map initialization code
hasLoadedMap = true;
}
}
});
I have adapted the other answers above into something more current.
我已将上面的其他答案改编为更当前的内容。
回答by Machteld Vlietstra
I have been struggling with this as well. So I will provide the code which helped me get this done, thanks to the code provided by Fuzz(I'm sorry I can't vote your answer up as I don't have enough reputation...)
我也一直在为此苦苦挣扎。因此，我将提供帮助我完成这项工作的代码，这要归功于Fuzz提供的代码（很抱歉，我无法投票支持您的答案，因为我没有足够的声誉......）
I use Advanced Custom Fields for displaying a Google Map. I used the code provided by ACF of the documentation on the acf website and modified the last bit (The "Document ready" part) to be able to show my map using Bootstraps collapse. The div with the map is hidden by the collapse script and when it is shown the javascript for showing the map will be fired. After hiding the map I faced the problem that the maps location settings were gone when showing the map again. With the help of Fuzz's piece of script I got it working correctly. Hopefully this will help others as well.
我使用高级自定义字段来显示 Google 地图。我使用了 acf 网站上文档的 ACF 提供的代码并修改了最后一位（“文档就绪”部分），以便能够使用 Bootstraps 折叠显示我的地图。带有地图的 div 被折叠脚本隐藏，当它显示时，用于显示地图的 javascript 将被触发。隐藏地图后，我遇到了再次显示地图时地图位置设置消失的问题。在 Fuzz 的一段脚本的帮助下，我让它正常工作。希望这也能帮助其他人。
var hasLoadedMap = false;
$('#map').on('shown.bs.collapse', function(e){
if(!hasLoadedMap){
$('.acf-map').each(function(){
render_map( $(this) );
});
hasLoadedMap = true;
}
});
回答by Tom van Enckevort
Are you using v2 or v3 of the Google Maps API? There have been several questions about this problem in the past, for example thisone (which also links to some of the other similar questions). It might be worth reading through those and see if any of the suggested solutions work for you.
您使用的是 Google Maps API 的 v2 还是 v3？过去有几个关于这个问题的问题，例如这个（它也链接到其他一些类似的问题）。可能值得通读这些内容，看看是否有任何建议的解决方案适合您。
[edit] Based on your comments below I would suggest to try and use an opacity animation rather than the fadeIn:
[编辑] 根据您在下面的评论，我建议尝试使用不透明动画而不是fadeIn：
//Default Action
$(".tab_content").animate({ opacity: 0 }, 0);
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").animate({ opacity: 1 }, 0);
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").animate({ opacity: 0 }, 0);
var activeTab = $(this).find("a").attr("href");
$(activeTab).animate({ opacity: 1 }, 500);
return false;
});
I have used it myself for a page using Google Maps API v3 and JQuery (not the JQuery tabs, though) and it worked fine for me.
我自己在一个使用 Google Maps API v3 和 JQuery（虽然不是 JQuery 选项卡）的页面中使用了它，它对我来说效果很好。
