gmap3 init 操作无法在隐藏 div 中正确显示地图

Question

我认为我真的应该发布新问题而不是回复已关闭的帖子。

在这里，我有两个选项卡，用于 2 张地图。一个是隐藏的。它们都以空白和相同的方式开始，因此我使用 gmap3 选择器一次性初始化两个地图。单击选项卡将显示相应的地图而无需重新初始化。感谢 Philar 和 MattBall，使用调整大小修复了一个显示问题。但是，最初隐藏的地图偏离中心并且处于不同的缩放级别。不知道为什么。有人知道吗？这是代码。

function initmap() {  
// setup map and basic overlay
$('.gmap').gmap3(
    { action: 'init',
        options: {
            zoom: DefaultZoom,
            minZoom: DefaultMinZoom,
            center: mapcenter,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            scrollwheel: false,
            rotateControl: false,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP,
                style: "SMALL"
            },
            panControl: false,
            panControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP,
                style: "SMALL"
            },
            streetViewControl: false,
            heading: 90
        }
    },
    { action: 'addGroundOverlay',
        url: '../maps/assets/sectors_color.png',
        bounds: [
            [49.313821, -123.022082],
            [49.199900, -123.264825]
        ],
        tag: 'SectorMapOverlay'
    }
);
map1 = $(mapID1).gmap3('get');
map2 = $(mapID2).gmap3('get');
$("#switchmap").click(function () {google.maps.event.trigger(map1, 'resize')});
$("#switchmap2").click(function () {google.maps.event.trigger(map2, 'resize')});
}

Answer 1

或者您可以手动操作：

map = $("#foo-map").gmap3('get');
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
map.panToBounds(map.getBounds());