Question

我需要在每个jQuery选项卡上有一个（独立的）地图。为什么第二个标签中的地图与第一个标签具有相同的中心？

请参阅我的JSFiddle http://jsfiddle.net/metaxos/KQpL6/2/

jQuery(document).ready(function () {
var map1;
var map2;

var myLatlng1 = new google.maps.LatLng(-34.397, 150.644);
var myOptions1 = {
    zoom: 8,
    center: myLatlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("map_1"), myOptions1);

var myLatlng2 = new google.maps.LatLng(-34.397, 150.644);
var myOptions2 = {
    zoom: 8,
    center: myLatlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var tabs = $( "#tabs" ).tabs({
    activate: function( event, ui ) {
        ui.newTab.index();

        if (ui.newTab.index() == '0') {
            google.maps.event.trigger(map1, 'resize');

        }
        if (ui.newTab.index() == '1') {
            google.maps.event.trigger(map2, 'resize');
        }
    }
    });
});

Answer 1

我不完全确定原因，但如果你改变了：

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
    }
    }
});

致：

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
        map2.setCenter(myLatlng2);
    }
    }
});

然后一切都按预期工作。地图之间肯定会有某种互动，但我不确定为什么。我会调查一下。 Updated fiddle.

每个jquery选项卡有一个谷歌地图，为什么有偏移？

1 个答案: