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）：

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

在index.js中使用此操作（它使用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（google for others）：

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（来自Leaflet示例）：

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，你正在编译应用程序的设备？

地图不会与cordlet.js一起显示在cordova上

1 个答案: