地圖不顯示在科爾多瓦與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

回答

相關問題