地図LeafletJSにレンダリングされていない - 空白のページを取得＆エラーなし

私はヨーロッパのためのLeafletJSライブラリ（ズームレベル6 & 7）を使用して、オンラインまたはオフラインのタイルのいずれかを示したマップビューを実装しようとしています。地図LeafletJSにレンダリングされていない - 空白のページを取得＆エラーなし

アトラスが生成される

が、それはいくつかのサブフォルダとしてフォルダMapQuestを含むzipファイルを作成します。

私は、これらの設定を使用してMobile Atlas Creator 2.0.0 beta 1と呼ばれるプログラムを使用してオフラインマップタイルを生成しましたタイル画像。

だから、私はhttp://leafletjs.com/からリーフレットJSライブラリのバージョン0.7.7をダウンロードしてオフラインマップタイルと一緒に以下のディレクトリ構造に抽出しています。ここ

は私の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モードでこれを実行しているだけでなく、試してみましたonlineモードは利用できません。私はただ空白のページを取得しています。コンソールにエラーはありません。

ここで間違っていると思われるアイデアはありますか？

出典

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にレンダリングされていない - 空白のページを取得＆エラーなし

答えて

関連する問題