Javascript 传单只装载一块瓷砖

我有一个问题，传单实际上阻碍了我的整个工作。由于某些原因，我无法解释，传单的UI已正确加载到我的Intel XDK应用程序中，但仅加载了一个地图磁贴-相同的代码在另一个测试应用程序中工作！现在，我尽了我所能，我希望这里有人能解决我的问题

为了更好地理解，这里是我的slipate.js中的代码（它不是slipate.js，因为我使用slipate-src.js作为脚本）和应用程序地图窗口的屏幕截图

function initLeaflet() {
document.getElementById("map").setAttribute("style", "height:" + window.innerHeight + "px; width:" + window.innerWidth + "px;");
var map = L.map('map');

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'examples.map-i875mjb7'
}).addTo(map);

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);

map.locate({setView: true, maxZoom: 16});

map.on('click', onMapClick);
}

function onLocationFound(e) {
var radius = e.accuracy / 2;

L.marker(e.latlng).addTo(map)
.bindPopup("Position: " + e.latlng + " Genauigkeit " + radius ).openPopup();

L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
alert(e.message);
}


function onMapClick(e) {
marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'});
marker.on('dragend', function(event){
    var marker = event.target;
    var position = marker.getLatLng();
    alert(position);
    marker.setLatLng([position],{id:uni,draggable:'true'}).bindPopup(position).update();
});
map.addLayer(marker);
}     

//var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else { 
    //x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
//x.innerHTML = "Latitude: " + position.coords.latitude + 
//"<br>Longitude: " + position.coords.longitude;    
}

function initfliple（）{
document.getElementById（“map”）.setAttribute（“样式”，“高度：+window.innerHeight+”px；宽度：“+window.innerWidth+”px；”；
var map=L.map（'map'）；
L.tileLayer（'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:'examples.map-i875mjb7'
}).addTo（地图）；
地图上（'locationfound'，onLocationFound）；
map.on（'locationerror'，onLocationError）；
locate（{setView:true，maxZoom:16}）；
map.on（'click'，onmaclick）；
}
函数onLocationFound（e）{
var半径=e.精度/2；
L.标记（e.latlng）.添加到（地图）
.bindPopup（“位置：+e.latlng+“Genauigkeit”+半径”）.openPopup（）；
L.圆（e.板条，半径）。添加到（地图）；
}
函数onLocationError（e）{
警报（e.message）；
}
函数onMapClick（e）{
marker=newl.marker（e.latlng，{id:uni，icon:redIcon，draggable:'true'}）；
marker.on（'dragend'，函数（事件）{
var marker=event.target；
var位置=marker.getLatLng（）；
警戒（位置）；
marker.setLatLng（[position]，{id:uni，draggable:'true'}）.bindpoop（position.update（）；
});
添加图层（标记）；
}     
//var x=document.getElementById（“演示”）；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
//x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
//x、 innerHTML=“纬度：”+position.coords.Latitude+
//“
经度：”+position.coords.Longitude；
}

---

我猜初始化时的映射大小是罪魁祸首

传单需要知道初始化时嵌入的元素的大小。传单使用该信息来了解要加载的瓷砖数量等。此外，对地图大小的任何编程更改（或传单无法轻易检测到的更改）必须紧跟

map.invalidateSize（..）

我怀疑在设置大小后，传单无法正确读取#map元素的新大小。之后尝试使大小无效或异步运行初始化。我想补充：

setTimeout(function () {
    map.invalidateSize();
}, 0);

---

然后检查是否有任何改善。

我使用该命令修复了缺少瓷砖的问题：

map.getSize();

---

看起来传单需要事先知道元素图的大小，正如Michal所说。

谢谢，这真的很有帮助！不知道我以前怎么没想过！谢谢