javascript - 在LeafletJS中未渲染 map -获取空白页且无错误

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

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

生成图集时，它将创建一个zip文件，其中包含文件夹MapQuest以及几个子文件夹和图块图像。

因此，我从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模式下运行此方法无济于事；我只是空白页。控制台中没有错误。

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

最佳答案

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

这是固定的工作版本：

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

LeafLetJS

javascript - 在LeafletJS中未渲染 map -获取空白页且无错误