карта leaflet.js не отображается

Я новичок leaflet.js. Может ли кто-нибудь помочь мне с отладкой следующего кода? Я пытаюсь показать карту на экране, но только кнопка увеличения и уменьшения отображается в Google Chrome, а экран карты пуст.карта leaflet.js не отображается

<!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>

источник

2016-05-04 anandg112

Вот ваш исправленный код: 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

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-04 10:27:11 YaFred

Спасибо, очень ценится. Он работает сейчас. – anandg112

Перечитайте Leaflet quick-start tutorial, в частности, этот бит:

Стоит отметить, что Листовка является агентом-агентом, что означает, что оно т обеспечивать конкретный выбор поставщиков для плитки, и она даже не содержит ни одного поставщика конкретной строки кода.

В листе не добавляются данные карты по умолчанию. Вы должны сказать Лифлет, какие данные (векторные функции, слои плитки) вы хотите показать.

источник

2016-05-04 10:30:44 IvanSanchez

карта leaflet.js не отображается

ответ

Смежные вопросы