我有一个小册子问题,实际上支撑着我的整个工作。对于一些原因,我无法解释,单张的UI是否正确装入我的英特尔XDK的应用程序,但只加载一个地图瓦片 - 同样的代码在另一个测试的应用程序!现在,我什么都试过了我能做到,我希望这里有人能解决我的问题。
为了更好地理解,这里是我leaflet.js代码(它不是leaflet.js,因为我使用的瓣叶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 © <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;
}
我猜想,在初始化地图的大小是罪魁祸首。
单张需要知道它嵌入在初始化时,在元素的大小。小叶使用该信息来知道多少瓦片加载等。此外(不能由小叶被容易地检测或改变)到地图的尺寸的任何方案变化必须被随后map.invalidateSize(..)
link。
我怀疑你设置的大小后,单张无法正确读取#map元素的新尺寸。试穿尺寸事后无效或异步运行初始化。我想补充:
setTimeout(function () {
map.invalidateSize();
}, 0);
并检查它是否得到任何好转。
我用命令修复我的思念牌的问题:
map.getSize();
看起来像单张需要知道元素地图的大小提前为米哈尔说。