谷歌地图和jQuery标签

StackOverflow https://stackoverflow.com/questions/3014156

  •  26-09-2019
  •  | 
  •  

题

我有与谷歌轻微问题映射包含在简单的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;
    });

});

下面是用于选项卡中的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>

我真的不知道该怎么做。是与谷歌的一个普遍问题映射或有东西与我的标签？但他们与其他一切工作得很好。

感谢您的帮助提前

有帮助吗？

解决方案

我已经解决了这个问题。

改变隐藏（）在jQuery来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地图，那么它将无法显示。 无论工作，你有“显示”您的DIV，使用该函数初始化地图后的股利已被证明。

if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) {
    LoadGoogleMap();
    maploaded = true;
}

在地图上已经被加载，你可以安全地隐藏或再次显示DIV没有任何问题，所以它的价值添加一个标志，检查是否它已经被载入。

您使用v2或谷歌地图API的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;
});

我已经用它自己使用谷歌地图API V3和JQuery一个页面（不JQuery的标签，虽然）和它的工作对我罚款。

谷歌地图，当你隐藏像jQuery的标签确实当您更改标签的元素不能很好地工作。

在简单的解决方案是结合谷歌地图初始化函数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的砌筑插件。

的任何其它插件

如果你仍然在努力得到这个权利像我，试试这个。

 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;
          }

      }
});

我已经适应在另一个的上面的回答到的东西更多的电流。

我已用本挣扎为好。所以，我会提供帮助我得到这个工作的代码，由于所提供的代码起毛（对不起，我不能投你的答案了，因为我没有足够的声誉...）

我使用高级自定义字段用于显示谷歌地图。我使用的ACF的ACF网站上的文档中提供的代码和修改后的最后一位（“文档准备”部分），以便能够使用引导程序崩溃，显示我的地图。与地图DIV被倒塌脚本隐藏和显示时用于显示地图的JavaScript将被解雇。隐藏地图后，我所面临的问题，即地图的位置设置都不见了再次展示地图时。细毛的一段脚本的帮助下，我得到它的正常工作。希望这将有助于其他人。

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){
if(!hasLoadedMap){
$('.acf-map').each(function(){

    render_map( $(this) );

});
 hasLoadedMap = true;
}

});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top