javascript - 为什么我的地图没有正确调整大小？

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

这是一篇关于使用 jQuery Mobile 实现 Google 地图 V3 API的精彩文章。它包含工作示例。