为什么我的地图不能正确调整尺寸？

Question

我的地图有问题，但没有正确调整大小。我有两个页面：#page1在启动时显示，#page2可以通过标签中的链接访问。

在#page1我初始化。地图：

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时，我添加了用于调整地图大小的代码：

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

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

如何解决此问题？

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谈论谷歌地图V3 API实现。它包含工作示例。