javascript - 为什么我的 map 无法正确调整大小？

Question

我的 map 有问题，无法正确调整大小。我有两个页面:在启动时显示的 #page1 和可通过选项卡中的链接访问的 #page2。

在#page1上我初始化。 map :

var map;
$(document).on('pageinit', '#page1', function () {
    // map init
    var mapOptions = {
        // karte wird initialisiert mit zoom aufs ruhrgebiet
        zoom: 12,
        center: new google.maps.LatLng(50, 7),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
});

然后我添加了代码，以便在到达 #page2 时调整 map 大小:

$(document).on('pageshow', '#page2', function () {
    google.maps.event.trigger(map, "resize");   
});

问题是，当我第一次到达#page2时， map 的大小不正确:

如何解决此问题？

Answer 1

这是因为 data-role="content" 未调整大小以覆盖所有可用空间。

在您的内容 div 上使用此 CSS:

.ui-content {
    position: absolute !important;
    top: 40px;
    right: 0;
    bottom: 40px;
    left: 0;
}

如果没有页眉或页脚，请将 40px 替换为 0。

这是一个很棒的 article 谈论使用 jQuery Mobile 实现 Google map V3 API。它包含工作示例。