我已经问过这个问题了here ,不幸的是问题无法解决,所以我在这里提问:)
我有一个 JQM 页面,其中显示了 map 。愚蠢的是,为了正确显示 map ,我必须重新加载页面。
这是第一次加载页面时 map 的显示方式:
这是刷新页面后的显示方式:
这是我的代码:
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);
});
这就是我设计 map 的方式:
<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
});
map 现在看起来像这样:
是否可以将宽度和高度设置为 100%?
最佳答案
map 需要具有定义宽度和高度的 Canvas 。在 Jquery mobile 中,处理页面的方式与普通 html 页面不同。即一页(即 data-role=page 的 div)一次可见,其他则不可见。因此,在任何页面上初始化 map 都应该使用名为 pageshow 的 jquery 移动特定页面事件来完成
$(document).on("pageshow","#page",function(){ // initialize map and show
});
关于javascript - 为什么我必须重新加载页面才能正确显示 map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26403889/