无法加载leaftlet地图

我正在关注leaftlet js入门教程。但我无法加载地图。这里是我的代码有无法加载leaftlet地图

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    </head> 

    <style> 
     #mapid { height: 180px; } 
    </style> 

    <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: 'I have put public access token' 
     }).addTo(mymap); 
    </script> 

    <body> 

     <div style="margin-top:100px;margin-left:100px;height: 200px;width:200px" id="mapid"></div> 
      <div style="height:200px;width:200px;background: red"> 
      </div>  
    </body> 
</html>

在上面的代码，id: 'your.mapbox.project.id'我无法找到。我发现只有公共访问令牌，就是这个原因地图是没有得到加载..任何帮助表示赞赏

来源

2016-12-18 gates

要了解传单，你可以只使用example的选项（查看源）

<div id="mapid" style="width: 600px; height: 400px;"></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=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); 

</script>

稍后，当您更熟悉传单时，您可以打开mapbox帐户并了解他们添加的内容。

之所以在小册子的主页中提到mapbox，是因为小册子的创建者现在正在为mapbox工作。

来源

2016-12-18 11:18:10 YaFred

或者，使用不同的tile服务，例如'var positron = L.tileLayer（'http：// {s} .basemaps.cartocdn.com/light_all/{z}/{x}/{y}。 png'，{归属地：'© OpenStreetMap贡献者，© CartoDB'}）。addTo（map）;' – IvanSanchez

无法加载leaftlet地图

回答

相关问题