2016-05-04 31 views
6

मैं leaflet.js पर नौसिखिया हूं। क्या कोई मुझे निम्नलिखित कोड डीबग करने में मदद कर सकता है? मैं स्क्रीन पर एक मानचित्र दिखाने की कोशिश कर रहा हूं लेकिन Google क्रोम पर केवल ज़ूम-इन और ज़ूम-आउट बटन दिखाई देता है और मानचित्र स्क्रीन खाली है।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> 

उत्तर

14

यहाँ अपने को सही कोड है: 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); 
+0

धन्यवाद, बहुत सराहना की। यह अब काम कर रहा है। – anandg112

2

फिर से पढ़ Leaflet quick-start tutorial, विशेष रूप से इस बिट:

यह ध्यान देने योग्य है कि पत्रक प्रदाता-अज्ञेयवादी है, जिसका अर्थ है कि यह नहीं करता टी टाइल्स के लिए प्रदाताओं में से एक विशेष रूप से पसंद लागू करने, और यह और भी कोड की एक प्रदाता विशेष लाइन शामिल नहीं है।

पत्रक कोई डिफ़ॉल्ट मानचित्र डेटा नहीं जोड़ता है। यह आप पर निर्भर करता है कि कौन सा डेटा (वेक्टर फीचर्स, टाइल लेयर) आप दिखाना चाहते हैं।

संबंधित मुद्दे