Node.js Express Jade - 不能顯示單張地圖

我不熟悉這個，並且正在按照教程here。我試圖用玉來創建一個地圖視圖（我知道它現在是帕格但教程使用了玉）。Node.js Express 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/[email protected]/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精細啓動，但是當我去查看的頁面（本地主機：3000 /地圖），有什麼都沒有。沒有錯誤...沒有。該教程沒有包含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/[email protected]/dist/leaflet.css") 
    body 
    div 
    block content

而且index.jade ...（我不碰這個）

extends layout 

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

來源

2017-03-09 chiefoflions

您是否在'＃map' div容器中指定了CSS'height'？ – ghybs

如果您檢查元素，頁面源代碼中是否有任何內容？它可能是渲染，但你可能沒有任何CSS來告訴地圖如何顯示（除非你從leaflet.js繼承了一些CSS） –

爲了您map.jade文件，第3行，嘗試確保您的地圖div具有指定的高度和寬度。我搗鼓了mapbox地圖類似的東西，並進行測試的緣故，我定義#map將如何與下面的內嵌樣式呈現：

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

我是不是能夠得到mapbox瓷磚在我第一次嘗試時正確渲染，所以我使用了不同的提供者。 https://leaflet-extras.github.io/leaflet-providers/preview/包含已知提供商的列表，其中許多是免費的。我能夠得到你的例子（減去服務器派生的點），使用Stamen基本層渲染。

來源

2017-05-21 21:00:24 brianbancroft

Node.js Express Jade - 不能顯示單張地圖

回答

相關問題