传单仅加载一个图块

Question

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

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

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;    
}

http://imgur.com/exOUZuT

Answer 1

我猜是初始化时地图的大小是罪魁祸首。

Leaflet在初始化的时候需要知道它嵌入的元素的大小。 Leaflet 使用该信息来了解要加载多少图块等。此外，任何对地图大小的编程更改（或 Leaflet 无法轻易检测到的更改）都必须跟随 map.invalidateSize(..) link。

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

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

并检查它是否有所改善。

Answer 2

我使用该命令修复了我丢失的图块问题：

map.getSize();

看来像Michal说的Leaflet需要提前知道element map的大小

传单仅加载一个图块

Leaflet only loads one tile

javascript

leaflet

intel-xdk