2016-12-18 3 views
0

Я следую за leaftlet js, начав учебник. Но я не могу загрузить карту. Вот код, у меня естьНевозможно загрузить карту вейк-карты

<!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' я не могу найти это. Я нашел только маркер общего доступа, это причина, карта не получает загружены .. любая помощь ценится

ответ

1

Чтобы узнать листовку, вы можете просто использовать варианты в 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 и узнать, что они добавляют.

Причина, по которой карточный бокс упоминается на домашней странице листовки, заключается в том, что создатель листовки теперь работает с карточкой.

+0

В качестве альтернативы, используйте другую услугу черепицы, например 'var positron = L.tileLayer ('http: // {s} .basemaps.cartocdn.com/light_all/{z}/{x}/{y}. png ', {атрибуция:' © OpenStreetMap авторы, © CartoDB '}). addTo (map); ' – IvanSanchez