2017-10-19 133 views
1

我想用OpenLayers疊加層與一些測試座標一起構建一個數組。不能在html scripttag中將EJS變量推入數組中?

這是代碼:

var parada = []; 

for(var i = 0; i < <%- coords.length%>; i++){ //First loop to fill the array 

    var arr = [<%- coords[i].lon %>, <%- coords[i].lat %>]; //THIS IS THE ERROR LINE! ... says the console... 
    parada.push(arr); 

} 

var overlays = []; 

for (i = 0; i < parada.lenght; i++) { //Second loop to build the overlays 
    overlays.push(new ol.Overlay({ 
     position: ol.proj.fromLonLat([parada[i][0], parada[i][1]]), //With the data of the array above 
     positioning: 'center-center', 
     element: document.getElementById('parada' + i), 
     stopEvent: false 
    })); 

} 

for (i = 0; i<overlays.length; i++){ // Last loop to assign the overlays. 
    map.addOverlay(overlays[i]); 
} 

重要:在我的app.js文件,座標爲,定義爲對象的數組(即我發現({})中的mongodb)。

我真的被困在這裏請幫忙! 謝謝! :DDD

回答

0

您的變量i存在於客戶端JS中,而不存在於服務器端JS中。

有很多方法,你可以解決這個問題,其中之一是各種:

var parada = <%- JSON.stringify(coords.map(function(pair) { 
    return [pair.lon, pair.lat]; 
})) %>; 

我假設lonlat總是會是數字,如不存在風險的注入攻擊。

或者,您可以在調用模板之前先進行轉換,將複雜性保留在模板本身之外。

順便提一下,您在lenght中也有一個錯字。

+0

謝謝!它似乎工作:) 我把你的代碼放在你說的app.js文件中。 還有一件事:如何在EJS中調用變量? <%= %>? <%= parada [0]%>或<%= parada [0] .lon%>都似乎不起作用... 非常感謝您的幫助!你太棒了:D –

+0

@AlanSchwarz變量'parada'只存在於客戶端JS中,而不存在於服務器端JS中。 「<% %>」中的代碼與外部代碼完全分開,這只是一個巧合,它們都使用JavaScript。從EJS的角度來看,只有「<% %>」內的代碼被解釋爲代碼,外部的位僅僅是任意文本。然後將模板生成的文本發送到瀏覽器(您可以在開發工具中看到它),然後瀏覽器運行生成的代碼。這兩個是完全獨立的過程。 – skirtle

0

進行了更改,以便在客戶端處理數據會更容易。

var lon = []; 
    var lat = []; 
    for (var i = 0; i < <%=lon.length%>; i++) {<%for(var x = 0; x < lon.length ;x++) { %> 
     lon.push(<%= lon[x] %>); 
     lat.push(<%= lat[x] %>); 
    <% } %>} 

這樣我在客戶端建立一個EJS數組。

//Create the Overlays Array 
    var overlays = []; 

    for (var i = 0; i < <%=lon.length%>; i++) { 
     overlays.push(new ol.Overlay({ 
      position: ol.proj.fromLonLat([lon[i], lat[i] ]), 
      positioning: 'center-center', 
      element: document.getElementById('parada' + i), 
      stopEvent: false 
     })); 
    } 

然後,我可以簡單地在任何需要的地方使用這個數組。

感謝@skirtle的幫助,你給我瞭解這個問題;)