コードはleaflet.jsのコードバーには表示されません

Question

cordovaの表示マップに問題があります。エラーはありませんが地図は表示されません。間違っていますか？ 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

添付の画像は、マップスクリプトが読み込んでいることを示しています。マップdiv - ズームイン/アウトボタンがあります。しかし、それはタイル層をロードしないように見えます。

最初に、テストしているデバイス/エミュレータにインターネット接続があるかどうかを確認してください。あなたのアプリケーション（index.html）にボタンを追加することができます

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

： index.jsでこのアクションで

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

（それはあなたがそれを持っていない場合、あなたは純粋なJavaScriptにそれを書き換えることができ、jqueryのを使用しています）

---

あなたはまた、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); 

---

はまた、それはあなたがあなたのアプリケーションをテストする方法の詳細を便利記述します。それはデバイスかいくつかのエミュレータですか？あなたはインターネットに接続していると確信していますか？どのバージョンのコードバを使用しているのですか？