Google地图和jQuery标签
我对简单jQuery标签中包含的Google地图有轻微问题。
下面我贴了代码：
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; }); }); 以下是标签的HTML：
我真的不知道该怎么做。 这是谷歌地图的一般问题，还是我的标签有什么问题？ 但是他们对其他一切都很好。
提前谢谢你的帮助
我已经解决了这个问题。
将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; }); });
一切正常。
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'); });
我采用了不同的方法 – 在激活标签后初始化地图。 这是我的代码：
//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; });
确保带有地图ID的标签与脚本匹配。 在我的情况下，它的“location_tab”。
打开选项卡时初始化地图绝对是可行的方法。 如果您尝试在隐藏的div上初始化地图，则无法显示。 无论你有什么function“显示”你的div，使用该function在div显示之后初始化地图。
if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) { LoadGoogleMap(); maploaded = true; }
加载地图后，您可以安全地隐藏或显示div而不会出现任何问题，因此值得添加一个标志来检查它是否已经加载。
您使用的是Google Maps API的v2还是v3？ 过去有一些关于这个问题的问题，例如这个问题（也与其他一些类似的问题有关）。 可能值得一读这些，看看是否有任何建议的解决方案适合您。
[编辑]根据你的评论我建议尝试使用不透明度动画而不是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; });
我自己使用它来使用Google Maps API v3和JQuery（不过JQuery选项卡），它对我来说很好用。
当您更改标签时隐藏jquery标签等元素时，Google地图无效。
最简单的解决方案是将google map初始化函数绑定到jquery选项卡对象的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 } });
此解决方案适用于任何其他插件，这些插件依赖于DOM元素的宽度和隐藏，例如jquery masonry插件。
如果你仍然像我一样努力做到这一点，试试这个。
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; } } });
我已将上面的其他答案改编成更新的内容。
我一直在努力解决这个问题。 所以我会提供帮助我完成这项工作的代码，感谢Fuzz提供的代码（对不起，由于我没有足够的声誉，我不能投票给你答案……）
我使用高级自定义字段来显示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; } });