地图不显示在科尔多瓦与leaflet.js

我们有一个显示地图上cordova.we没有任何错误，但地图不display.What我们做错了？ enter image description here 地图不显示在科尔多瓦与leaflet.js

(function() { 
"use strict"; 

document.addEventListener('deviceready', onDeviceReady.bind(this), false); 

function onDeviceReady() { 
    document.addEventListener('pause', onPause.bind(this), false); 
    document.addEventListener('resume', onResume.bind(this), false); 

    var map = L.map('mapid').fitWorld(); 

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     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>', 
     maxZoom: 18 
    }).addTo(map); 
}; 

function onPause() { 
}; 

function onResume() { 
};

}）（）;

来源

2017-03-04 Nick Bachyla

你能至少显示一个外部图像吗？例如。如果您在某个URL或“http：// a.tile.openstreetmap.org/0/0/0.png”中包含'src'的''标签？ – ghybs

您附加的图像显示您的地图脚本正在加载地图div - 您有放大/缩小按钮。但它看起来不会加载图块图层。

首先检查您正在测试的设备/仿真器上是否有互联网连接。你可以到你的应用程序（index.html）添加按钮：在index.js这个动作

<button id="home_network_button"> check network?</button>

（它使用jQuery的，如果你没有它，你可以将其改写为纯JavaScript）：

$("#home_network_button").on('click', function(){ 
    checkConnection(); 
}); 

function checkConnection() { 
    var networkState = navigator.connection.type; 

    var states = {}; 
    states[Connection.UNKNOWN] = 'Unknown'; 
    states[Connection.ETHERNET] = 'Ethernet connection'; 
    states[Connection.WIFI]  = 'WiFi connection'; 
    states[Connection.CELL_2G] = 'Cell 2G connection'; 
    states[Connection.CELL_3G] = 'Cell 3G connection'; 
    states[Connection.CELL_4G] = 'Cell 4G connection'; 
    states[Connection.CELL]  = 'Cell generic connection'; 
    states[Connection.NONE]  = 'No network'; 

    alert('Netowrk state: ' + states[networkState]); 
}

您也可以尝试在你的应用程序使用不同的瓷砖供应商，例如对ESRI（谷歌的其他人）：

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', { 
    maxZoom: 18, 
    id: 'mapbox.streets' 
}).addTo(map);

或Mapbox（从单张为例）：

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
    maxZoom: 18, 
    id: 'mapbox.streets' 
}).addTo(map);

而且它会非常有用，如果你写你如何测试您的应用程序的更多细节。它是设备还是一些模拟器？你确定它有互联网连接？你正在编译什么版本的cordova，你正在编译应用程序的设备是什么？

来源

2017-03-04 15:26:46 d324223

地图不显示在科尔多瓦与leaflet.js

回答

相关问题