单张地图未显示

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 个解决方案

解决方案1
1 2017-10-18 10:26:27

解决方案2
0 2017-03-16 13:20:02

单张地图未显示

问题描述

2 个解决方案

解决方案1 1 2017-10-18 10:26:27

解决方案2 0 2017-03-16 13:20:02

解决方案1
1 2017-10-18 10:26:27

解决方案2
0 2017-03-16 13:20:02