Question

我是新手，并且正在关注教程here。我正在尝试使用jade创建一个地图视图（我知道它现在是哈巴狗，但教程使用了玉）。

我的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.未定义”。我把它们包括在内但不确定我是否把它们放在正确的位置。任何帮助，将不胜感激。

这是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}

Answer 1

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

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

我无法在第一次尝试时正确渲染地图框图块，因此我使用了不同的提供程序。 https://leaflet-extras.github.io/leaflet-providers/preview/包含已知提供商的列表，其中许多提供商都是免费的。我能够得到你的例子（减去服务器派生的点）以使用Stamen基础层渲染得很好。

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

1 个答案: