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 モバイルでは、通常の html ページとは異なる方法でページを処理します。つまり、一度に 1 つのページ (つまり、data-role=page の div) が表示され、他のページは表示されません。そのため、任意のページでマップを初期化するには、pageshow という jquery モバイル固有のページ イベントを使用する必要があります。

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