2
リーフレットを使用してインタラクティブマップを生成しようとしています。しかし、タイルレイヤーをレンダリングする際に問題が発生しています。私はそうのように、私だけ空白のマップを与えているHTMLをレンダリングするdustjsを使用しています：リーフレットタイルレイヤーをレンダリングできません
私が最初にQuick Startガイドに従って使用してこのMapBoxを完了しようとしました。ですべての問題を回避するために、私はまた、OSMを使用してみました
：私は、私はこのようなURLからの私のスタイルIDを持って
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を取得したので、このコードを私が見つけたチュートリアルから取りました：
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);
しかし、これも空白のマップをレンダリングします。任意の助けを事前に
<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>ありがとう：
はここでOSMを使用して完全なコードダンプです。もっと情報が必要なら私に知らせてください。
リーフレットコンポーネントを初期化する前に、divのサイズがゼロでないこと（幅と高さの両方）があることを確認してください。 – lonelyelk
cssファイルが正しく読み込まれていることを再度確認できますか？ – muzaffar
@lonelyelk幅と高さは他のものの前にロードされているスタイルシートから来ます。 – Jack