地图未在 LeafletJS 中呈现 - 得到空白页且没有错误答案

【问题标题】：Map is not rendering in LeafletJS - getting blank page & no errors地图未在 LeafletJS 中呈现 - 得到空白页且没有错误
【发布时间】：2016-04-01 11:36:58
【问题描述】：

我正在尝试使用欧洲的LeafletJS 库（缩放级别6 和7）来实现显示在线或离线图块的地图视图。

我使用名为Mobile Atlas Creator 2.0.0 beta 1 的程序使用以下设置生成了离线地图图块：

生成图集时，它会创建一个 zip 文件，其中包含文件夹 MapQuest 以及多个子文件夹和平铺图像。

所以，我从http://leafletjs.com/ 下载了leaflet 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 模式下运行它，但无济于事；我只是得到一个空白页。控制台没有错误。

有什么想法我在这里可能做错了吗？

【问题讨论】：

标签： javascript leaflet openstreetmap

【解决方案1】：

好的，我想通了。该问题是由于未设置自定义样式来控制高度引起的。

这是固定的工作版本：

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

【讨论】：