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');

    });

});

TABS CODE：

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

在jquery标签中显示谷歌地图

1 个答案: