在 jquery 选项卡中显示谷歌地图 [重复]

Question

我在使用 jQuery 选项卡时遇到谷歌地图问题 - 我在其中一个选项卡中只看到地图的一小部分 我在这里搜索答案，发现帖子说要添加脚本。我没有任何运气就添加了它

我该如何解决？

$(document).ready(function(){

    $("a.tab").click(function () {
        $(".active").removeClass("active");

        $(this).addClass("active");

        $(".tab_block").slideUp();

        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });

});

/// addon script: ////
 $(function(){

    $('#maptab').bind('click',function() {
                var w = $('#map_view').width();
                var h = $('#map_view').height();
                $('#map').css({ width: w, height: h });
               google.maps.event.trigger(map, 'resize');

    });

});     

标签代码：

<ul class="tabs">
    <li><a href="#" title="content_4" class="tab" id="maptab">MAP</a></li>
    <li><a href="#" title="content_5" class="tab ">tab 5</a></li>
</ul>

<div id="content_4" class="tab_block">

    MAP SCRIPTS GOES HERE...

    <div id='map'></div>


</div>

Answer 1

在地图隐藏时初始化地图的问题在于它依赖的属性/值在隐藏时无法正常工作。您需要在单击选项卡并显示内容时初始化地图，而不是在页面加载时（在 $(function(){ .. } ); 内）初始化地图。

$("a.tab").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".tab_block").slideUp();

    var content_show = $(this).attr("title");

    $("#"+content_show).slideDown(400, function(){
        // execute this code after tab content has been displayed
        if ( $(this).find('#map').children().length === 0 ) { 
            // find a #map element within the content area
            // if the #map element has no children initialize the map

            // code to initialize the map/map scripts here
        }
    });
});