Question

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

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

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

因此，我从http://leafletjs.com/下载了传单JS库版本0.7.7，并将其与离线地图图块一起提取到以下dir结构中：

以下是 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模式下运行此功能无效;我只是得到一个空白页面。控制台中没有错误。

我在这里做错了什么想法？

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

在LeafletJS中没有渲染地图 - 得到空白页面＆amp;没有错误

1 个答案: