2016-04-01 5 views
1

alma.Harita LeafletJS içinde render değil - boş sayfa & I Avrupa için <code>LeafletJS</code> kitaplığı (Yakınlaştırma düzeyini <code>6</code> & <code>7</code>) kullanarak çevrimiçi veya çevrimdışı fayans gösteren bir harita görünümünü uygulamak çalışıyorum hiç hata

atlas oluşturulur

enter image description here

, birkaç alt klasörler ve klasörü MapQuest içeren bir zip dosyası oluşturur:

Ben bu ayarları kullanarak Mobile Atlas Creator 2.0.0 beta 1 adlı bir program kullanarak çevrimdışı harita döşemelerini oluşturduktan çini resimleri.

Yani, çevrimdışı harita bölümleri ile birlikte aşağıdaki dir yapısına http://leafletjs.com/ gelen broşür JS kitaplığı sürümü 0.7.7 indirilen ve çıkartmışlardır: Burada

enter image description here benim index.html içeriğini oluşturmaktadır

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Europe Zoom Level 6 & 7</title> 
     <link rel="stylesheet" type="text/css" href="leaflet.css"> 
     <script type="text/javascript" src="leaflet.js"></script> 
    </head> 
    <body> 
     <div id="map" style="width: 100%; height: 100%;"></div> 
     <script type="text/javascript"> 

      (function() { 

       // Objects 
       var isOnline = true; 
       var map = L.map('map').setView([51.505, -0.09], 6);; 

       // Generate tile layer url 
       var tileLayerUrl = isOnline 
        ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
        : 'MapQuest/{z}/{x}/{y}.jpg'; 

       // Set tile layer & set to map 
       L.tileLayer(tileLayerUrl, { 
        minZoom : 6, 
        maxZoom : 7, 
        attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       }).addTo(map); 

      })(); 

     </script> 
    </body> 
</html> 

ben offline modunda bu gibiçalışan çalıştımodu boşuna; Sadece boş bir sayfa alıyorum. Konsolda hata yok.

Burada yanlış yaptığım herhangi bir fikir var mı?

cevap

0

Tamam, anladım. Sorun, yüksekliği kontrol etmek için özel stiller ayarlamamıştı.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Europe Zoom Level 6 & 7</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" type="text/css" href="leaflet.css"> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0;} 
      #map { height: 100% } 
     </style> 
     <script type="text/javascript" src="leaflet.js"></script> 
    </head> 
    <body> 
     <div id="map"></div> 
     <script type="text/javascript"> 

      (function() { 

       // Objects 
       var isOnline = false; 
       var map = L.map('map').setView([51.505, -0.09], 6);; 

       // Generate tile layer url 
       var tileLayerUrl = isOnline 
        ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
        : 'MapQuest/{z}/{x}/{y}.jpg'; 

       // Set tile layer & add to map 
       L.tileLayer(tileLayerUrl, { 
        minZoom : 6, 
        maxZoom : 7, 
        attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       }) 
       .addTo(map); 

      })(); 

     </script> 
    </body> 
</html> 
:

Burada sabit çalışma versiyonu

İlgili konular