Node.js Express Jade - 无法显示传单地图答案

【问题标题】：Node.js Express Jade - Cant display leaflet mapNode.js Express Jade - 无法显示传单地图
【发布时间】：2017-03-09 21:00:11
【问题描述】：

我是新手，正在学习here 的教程。我正在尝试使用翡翠创建地图视图（我知道它现在是哈巴狗，但本教程使用翡翠）。

我的 index.js 文件夹中的地图页面有一个路由器请求。它查询数据库并以 geojson 格式返回一些数据。我将数据显示在单独的页面上，所以那里不应该是个问题。

在 index.js 中请求地图页面：

//get map page
router.get('/map', function(req, res) {
    var client = new pg.Client(conString); // Setup our Postgres Client
    client.connect(); // connect to the client
    var query = client.query(example_query); // Run our Query
    query.on("row", function (row, result) {
        result.addRow(row);
    });
    // Pass the result to the map page
    query.on("end", function (result) {
        var data = result.rows[0].row_to_json // Save the JSON as variable data
        res.render('map', {
            title: "Express API", // Give a title to our page
            jsonData: data // Pass data to the View
        });
    });
});

下一步是创建地图视图，以便我可以使用传单地图显示数据。保存在map.jade中：

extends layout
block content
    #map
    script(src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js")
    script.
        var myData = !{JSON.stringify(jsonData)};
        // Create variable to hold map element, give initial settings to map
        var map = L.map('map',{ center: [42.375562, -71.106870], zoom: 14});
        // Add tile layer to map element
        L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/tiles/256/{z}/{x}/{y}?access_token=exampleaccesstoken", {attribution: "Mapbox", maxZoom: 18, minZoom: 2}).addTo(map);
        // Add JSON to map
        L.geoJson(myData,{
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.f2);
            }
        }).addTo(map);

NPM 启动正常，但是当我查看页面 (localhost:3000/map) 时，那里什么也没有。没有错误……没有。该教程没有包含leaflet.js 脚本和leaflet.css 链接，导致“L. not being defined”。我将它们包括在内，但不确定我是否将它们放在正确的位置。任何帮助，将不胜感激。

这是layout.jade供参考：

html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css")
  body
    div
    block content

还有index.jade...（这个我没碰过）

extends layout

block content
  h1= title
  p Welcome to #{title}

【问题讨论】：

您是否在 #map div 容器上指定了 CSS height？
如果您检查元素，页面源中是否有任何内容？它可能正在渲染，但您可能没有任何 CSS 来告诉地图如何显示（除非您从 Leaflet.js 继承一些 CSS）

标签： node.js express leaflet pug

【解决方案1】：

对于您的 map.jade 文件，在第 3 行，尝试确保您的地图 div 具有指定的高度和宽度。我正在用 mapbox 地图处理类似的东西，为了测试，我定义了#map 将如何使用以下内联样式进行渲染：

#map(style="width: 100vw; height: 500px;")

我第一次尝试时无法正确渲染 mapbox 切片，因此我使用了不同的提供程序。 https://leaflet-extras.github.io/leaflet-providers/preview/ 包含已知提供商的列表，其中许多是免费的。我能够让您的示例（减去服务器派生点）使用 Stamen 基础层进行渲染。

【讨论】：