La mappa di leaflet.js non viene visualizzata

Sono un novizio a leaflet.js. Qualcuno può aiutarmi con il debug del seguente codice? Sto cercando di mostrare una mappa sullo schermo, ma solo il pulsante di zoom in e zoom out viene visualizzato su Google Chrome e la schermata della mappa è vuota.La mappa di leaflet.js non viene visualizzata

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

fonte

2016-05-04 anandg112

Ecco il codice corretto: http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview

Non v'è alcun fornitore di piastrelle nel codice, quindi niente sta mostrando nella mappa.

Controllare la fonte di 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);

Se non si desidera piastrelle da mapbox, è possibile utilizzare OpenStreet mappa

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(mymap);

fonte

2016-05-04 10:27:11 YaFred

Grazie, molto apprezzato. Funziona ora. – anandg112

Rileggere il Leaflet quick-start tutorial, in particolare questo bit:

Vale la pena notare che Leaflet è provider-agnostico, il che significa che non t far rispettare una particolare scelta dei fornitori per le piastrelle, e non contiene neppure una singola linea specifico del provider di codice.

L'opuscolo non aggiunge alcun dato di mappa predefinito. Spetta a te dire a Leaflet quali dati (caratteristiche vettoriali, livelli tessere) vuoi mostrare.

fonte

2016-05-04 10:30:44 IvanSanchez

La mappa di leaflet.js non viene visualizzata

risposta

Problemi correlati