2
我正嘗試使用單張來生成交互式地圖。不過,我在渲染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 © <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: '© <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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
提前任何幫助感謝。如果您需要更多信息,請告訴我。
在初始化傳單組件之前,請確保您div的大小(寬度和高度都不爲零)。 – lonelyelk
你可以仔細檢查css文件是否正確加載? – muzaffar
@lonelyelk寬度和高度來自樣式表,該樣式表在一切之前加載。 – Jack