Die Karte zeigt nicht auf Cordova mit leaflet.js

Question

wir haben ein Problem mit Display-Karte auf Cordova.We hat keine Fehler, aber Karte ist nicht Display.Was machen wir falsch? enter image description here

(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() { 
}; 

})();

Answer 1

Das angefügte Bild zeigt, dass das Kartenskript die Karte div lädt - Sie haben Schaltflächen zum Vergrößern/Verkleinern. Es sieht jedoch so aus, als würde es keine Kachel-Layer laden.

Zuerst überprüfen Sie, ob Sie eine Internetverbindung auf dem Gerät/Emulator haben, den Sie testen. Sie können Schaltfläche, um Ihre Anwendung hinzufügen (index.html):

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

mit dieser Aktion in index.js (es verwendet Jquery, wenn Sie es nicht haben, können Sie es zu reinem Javascript neu zu schreiben):

$("#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]); 
} 

---

Sie können auch versuchen, eine andere Fliesen-Provider in Ihrer Anwendung zu verwenden, in Beispiel Esri (für andere google):

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

oder MapBox (von Leaflet Beispiel):

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); 

---

Auch wäre es hilfreich, wenn Sie schreiben mehr Details, wie Sie Ihre Anwendung testen. Ist es ein Gerät oder ein Emulator? Sind Sie sicher, dass es eine Internetverbindung hat? In welcher Version von Cordova sind Sie tätig, für welche Geräte kompilieren Sie die App?