Question

以下代码应该可以使用，但由于某种原因，第二个选项卡未正确加载地图。

地图调整大小似乎没有正常工作，但我无法弄清楚为什么它没有加载。 peridoicaly加载，当它第二个选项卡没有加载标记在页面中间？

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



                function initialize()
                {


                    var latlng = new google.maps.LatLng(51.5388795,-0.057876099999930375);
                    var latlng2 = new google.maps.LatLng(51.54141329999999,-0.08070509999993192);

                    var myOptions =
                    {
                        zoom: 15,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    var myOptions2 =
                    {
                        zoom: 15,
                        center: latlng2,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    var map = new google.maps.Map(document.getElementById("mapcanvas1"), myOptions);

                    var map2 = new google.maps.Map(document.getElementById("mapcanvas"), myOptions2);

                    var myMarker = new google.maps.Marker(
                    {
                        position: latlng,
                        map: map,
                        title:"Test Title"
                   });

                    var myMarker2 = new google.maps.Marker(
                    {
                        position: latlng2,
                        map: map2,
                        title:"Test Title"
                    });


                    $(".tabs a").click(function() {
                        $(".tab_container > div").css({'display':'block'});
                        google.maps.event.trigger(map, 'resize');

                    });
                }                   

                google.maps.event.addDomListener(window, 'load', initialize);

        })

Answer 1

Google Maps Api已更新。查看新的Api版本。

Answer 2

您还需要在“map2”上触发resize事件。并且在显示div之后你必须这样做。一旦地图具有正确的大小，您还必须设置地图的中心（否则它会显示在左上角）。

working fiddle

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

$(".tabs a").click(function () {
    $(".tab_container > div").css({
        'display': 'block'
    });
    google.maps.event.trigger(map, 'resize');
    google.maps.event.trigger(map2, 'resize');
    setTimeout(function () {
        map.setCenter(latlng);
        map2.setCenter(latlng2);
    }, 100);
 });

古老的Google Map＆amp;标签，而不是负载？

2 个答案: