2

我已经在这里问了这个问题，不幸的是问题无法解决，所以我在这里问:)

我有一个 JQM 页面，其中显示了一张地图。愚蠢的是，为了正确显示地图，我必须重新加载页面。

这是地图在页面第一次加载时显示的方式： 重载前的网站

这是刷新页面后的显示方式： 重载前的网站

这是我的代码：

var map;
    require([
                "esri/map",
                "dojo/dom",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "dojo/domReady!"
            ],
            function (Map, dom, Tiled) {
                map = new Map("map", {
                    logo: false,
                    minZoom: 1,
                    maxZoom: 11
                });
                var luftbild = new Tiled(URL);
                map.addLayer(luftbild);
    });

这就是我设置地图样式的方式：

<style>
    html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
    }
</style>

以及我如何显示它：

<div data-role="page" style="background-color:red" ...>
    <!--Header-->
        ....
    <!--/Header-->
    <!--Content-->
        <div id="map">
        </div>
    <!--/Content-->
</div>

编辑：

放置此行代码后：

$(document).on("pageshow","#page",function(){ // initialize map and show
});

地图现在看起来像这样： 在此处输入图像描述

是否可以将宽度和高度设置为 100%？

4

1 回答 1

3

地图需要具有定义宽度和高度的画布。在 Jquery mobile 中，处理页面的方式与普通的 html 页面不同。即，一次可见一页（即具有 data-role=page 的 div），其他则不可见。因此，在任何页面上初始化地图都应该使用名为 pageshow 的 jquery mobile 特定页面事件来完成

$(document).on("pageshow","#page",function(){ // initialize map and show
});
于 2014-10-16T12:42:03.757 回答