传单只加载一个瓷砖 [英] Leaflet only loads one tile

问题描述

我对 Leaflet 有一个问题，它实际上支撑了我的整个工作.由于某些我无法解释的原因，Leaflet 的 UI 已正确加载到我的英特尔 XDK 应用程序中，但只加载了一个地图图块 - 相同的代码在另一个测试应用程序中工作！现在，我已经尝试了我能做的一切，我希望这里有人能解决我的问题.

I have a problem with Leaflet that actually holds up my whole work. For some reasons I can not explain, the UI of Leaflet is correctly loaded in my Intel XDK app, but there is only one map tile loaded - the same code works in another test app! Now, that I tried everything I could do, I hope that someone here can solve my problem.

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

For better understanding, here is the code in my leaflet.js (it isn't the leaflet.js, because I'm using the leaflet-src.js as script) and a screenshot of the map window of the app.

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

推荐答案

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

I would guess that the size of the map upon initialization is the culprit.

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

Leaflet needs to know the size of the element it is embedded in when initializing. Leaflet uses that information to know how much tiles to load etc. Furthermore any programmatic changes (or changes that cannot be easily detected by Leaflet) to the size of the map have to be followed by map.invalidateSize(..) link.

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

I suspect that after you set the size, Leaflet fails to read properly the new size of the #map element. Try invalidating the size afterwards or run initialization asynchronously. I would add:

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

并检查它是否变得更好.

and check if it gets any better.

这篇关于传单只加载一个瓷砖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！