22

私はの初心者leaflet.jsです。次のコードのデバッグを手伝ってくれる人はいますか? 画面に地図を表示しようとしていますが、Google Chrome にズームインとズームアウトのボタンしか表示されず、地図画面が空です。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <style>
            #mapid { height: 180px; }
        </style>
    </head>

    <body>
        <div id="mapid"></div>
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script>
            var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        </script>
    </body>
</html>
4

3 に答える 3

51

修正されたコードは次のとおりです: http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview

コードにタイル プロバイダーがないため、マップには何も表示されません。

http://leafletjs.com/examples/quick-start-example.htmlのソースをチェックしてください

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

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    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>',
    id: 'mapbox.streets'
}).addTo(mymap);

mapbox からのタイルが必要ない場合は、openstreet map を使用できます

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
于 2016-05-04T10:27:11.857 に答える
7

リーフレット クイックスタート チュートリアル、特にこのビットを読み直してください。

Leaflet はプロバイダーに依存しないことに注意してください。つまり、タイルに対して特定のプロバイダーの選択を強制することはなく、プロバイダー固有のコード行が 1 行も含まれていません。

Leaflet はデフォルトの地図データを追加しません。表示するデータ (ベクター機能、タイル レイヤー) を Leaflet に伝えるのはあなた次第です。

于 2016-05-04T10:30:44.620 に答える