無法呈現單張瓷磚層

我正嘗試使用單張來生成交互式地圖。不過，我在渲染tilelayer時遇到了一些麻煩。我使用dustjs呈現HTML，它只是給了我一個空白的地圖，像這樣：無法呈現單張瓷磚層

我最初試圖完成這個使用MapBox按照該Quick Start指南。我相信我已經得到了正確的訪問令牌，

var mymap = L.map('map').setView([51.505, -0.09], 13); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=XYZ', { 
     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, 
     id: 'USERNAME.STYLEID', 
     accessToken: 'XYZ' 
    }).addTo(mymap);

我有我的風格ID從URL像這樣：

我爲了繞過任何問題與使用OSM還試圖獲得訪問令牌和項目的ID，所以我把這個代碼在教程中，我發現：

var map = L.map('map', { 
     center: [43.64701, -79.39425], 
     zoom: 15 
    }); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map);

但也呈現空白地圖。

下面是使用OSM完整的代碼轉儲：

<head> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
    <link rel="stylesheet" href="/styles/leaflet.css" /> 
 
    <script src="../js/leaflet.js"></script> 
 
</head> 
 
<body onload="onload()"> 
 
    <div id="map"></div> 
 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    <script> 
 
     var map = L.map('map', { 
 
      center: [43.64701, -79.39425], 
 
      zoom: 15 
 
     }); 
 

 
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
 
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
     }).addTo(map); 
 
    </script> 
 
</body>

提前任何幫助感謝。如果您需要更多信息，請告訴我。

來源

2016-12-25 Jack

在初始化傳單組件之前，請確保您div的大小（寬度和高度都不爲零）。 – lonelyelk

你可以仔細檢查css文件是否正確加載？ – muzaffar

@lonelyelk寬度和高度來自樣式表，該樣式表在一切之前加載。 – Jack

它看起來像tilelayer中的圓括號不能正常工作。在編譯模板時，因此灰塵編譯器可能會忽略{}中的參數

包含*.js文件而不是內聯格式將會起作用。

來源

2016-12-27 11:57:13 muzaffar

無法呈現單張瓷磚層

回答

相關問題