問題描述

我對 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 >OpenStreetMap</a> contributors, ' +
        '<a  +
        'Imagery ? <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.

這篇關于傳單只加載一個瓷磚的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！