Question

我有一个项目在JQuery标签上加载四个谷歌地图。直到上周，这完美地运作。现在，当页面加载时，屏幕变黑，你只看到一些Map控件和我页面的一些随机位。如果再次单击其中一个选项卡，则整个事件会突然正确呈现。

标签的HTML代码是

<ul class="tabs">
    <li><a id="tabname1" href="#tab1">LLP</a></li>
    <li><a id="tabname2" href="#tab2">Aus</a></li>
    <li><a id="tabname3" href="#tab3">Can</a></li>
    <li><a id="tabname4" href="#tab4">SA</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab1address"></td><td id="tab1contact"></td><td id="tab1map"><div id="map_canvas"></div></td></tr></tbody></table>
    </div>
    <div id="tab2" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab2address"></td><td id="tab2contact"></td><td id="tab2map"><div id="map_canvas1"></div></td></tr></tbody></table>
    </div>
    <div id="tab3" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab3address"></td><td id="tab3contact"></td><td id="tab3map"><div id="map_canvas2"></div></td></tr></tbody></table>
    </div>
    <div id="tab4" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab4address"></td><td id="tab4contact"></td><td id="tab4map"><div id="map_canvas3"></div></td></tr></tbody></table>
    </div>
</div>

当标签获取其内容时，地图将使用

进行初始化

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        v:3.4
    }

    mapdata = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    mapdata1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
    mapdata2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
    mapdata3 = new google.maps.Map(document.getElementById("map_canvas3"), myOptions);
}

如果我只是将一张地图初始化，那么这个问题就会消失。

我知道上面的代码显示了四个具有相同位置集等的地图，然后我使用GeoCoding查看特定的地址数据。

如果我只初始化一个地图（在任何隐藏或可见的标签上），那么页面会正确呈现。

有谁知道为什么会这样？

编辑：如果我从第一个标签（默认显示的标签）中删除地图。行为停止了。

如果我在第一个标签上只有地图，则行为停止。当隐藏标签和默认可见标签上都有地图时，我就会遇到问题。

以下是显示和隐藏标签的代码。

$(document).ready(function () {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content


    //On Click Event
    $("ul.tabs li").click(function () {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
});

IE8中的黑屏加载多个谷歌地图（v3API）时

0 个答案: