Карта не рендеринг в LeafletJS - получение пустой страницы & без ошибок

Я пытаюсь реализовать вид карты, который показывает онлайн или оффлайн плитки с использованием LeafletJS библиотеки для Европы (уровня масштабирования 6 & 7).Карта не рендеринг в LeafletJS - получение пустой страницы & без ошибок

Я сгенерировал офлайн-карту, используя программу под названием Mobile Atlas Creator 2.0.0 beta 1 используя следующие параметры:

Когда атлас генерируется, он создает почтовый файл, содержащий папку MapQuest с несколькими подпапок и черепичные изображения.

Итак, я скачал листовка JS версию библиотеки 0.7.7 из http://leafletjs.com/ и экстрагируют в следующей дир структуры вместе с офлайновых тайлов:

Вот содержание моего index.html

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

Я попытался запустить это в режиме offline, а такжеРежимбезрезультатно; Я просто получаю пустую страницу. В консоли нет ошибок.

Любые идеи, что я могу делать неправильно здесь?

источник

2016-04-01 Latheesan

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

Вот фиксированная рабочая версия:

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

источник

2016-04-01 11:57:29 Latheesan

Карта не рендеринг в LeafletJS - получение пустой страницы & без ошибок

ответ

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