Question

继续以下教程：http://leafletjs.com/examples/quick-start/

我将css和js下载到我工作的本地目录中，但我只显示灰色背景。没有地图。我错过了什么？谢谢。

<!DOCTYPE html>
<head>
    <meta charset="utf-8" >
    <title>Testing Leaflet</title>
    <link rel="stylesheet" href="leaflet.css" />
    <style>
        #mapid { height: 180px; }
    </style>
    <!--<script src="leaflet.js"></script> -->
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
    <div id="mapid"></div>
    <script>
        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={accessToken}', {
        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: 'your.mapbox.project.id',
        accessToken: 'your.mapbox.public.access.token'
        }).addTo(mymap);

        var marker = L.marker([51.5, -0.09]).addTo(mymap);

        var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).addTo(mymap);

        var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
        ]).addTo(mymap);

    </script>
</body>
</html>

以下是显示的所有内容。

Answer 1

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

我遇到了同样的问题，请将其编辑/添加到现有代码中。您无需设置任何帐户。

Answer 2

在Mapbox为您设置帐户并设置your.mapbox.project.id和your.mapbox.public.access.token。

单张地图不显示

2 个答案: