问题描述
我对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 © <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;
}
推荐答案
我猜大小初始化时的地图是罪魁祸首。
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.
这篇关于Leaflet仅加载一个tile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！