2017-10-19 4 views
1

OpenLayers Overlaysで使用するテスト座標を持つ配列を作成しようとしています。は、HTMLスクリプトタグで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ファイルで、COORDSは(iは({})のMongoDBで見つけること)オブジェクトの配列として定義されます。

私は本当にここにこだわっています! ありがとうございました! :DDD

答えて

0

変数iは、クライアントサイドJSではなく、サーバーサイドJSに存在します。

あなたがこの問題を解決する可能性があらゆる方法での1は次のようになり、あります

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

私は危険がないように、lonlatは常に数字になるだろうされていると仮定しています注射攻撃の

また、テンプレートを呼び出す前に変換を実行して、その複雑さをテンプレート自体から排除することもできます。

ちなみに、lenghtの入力ミスもあります。

+0

ありがとう!それはうまくいくようです:) 私はあなたのようにapp.jsファイルにあなたのコードを入れました。 さらにもう1つ:EJSで変数を呼び出すにはどうすればいいですか? <%= %>? <%= parada [0]%>または<%= parada [0] .lon%>は動作していないようです... ありがとうございました!あなたは素晴らしいです:D –

+0

@AlanSchwarz変数 'parada'は、クライアントサイドJSでのみ存在し、サーバサイドJSでは存在しません。 '<% %>'のコードは、コードとは完全に別のものです。両方がJavaScriptを使用しているのは偶然です。 EJSの観点からは、 '<% %>'のコードだけがコードとして解釈されます。外側のビットは、飛び出す任意のテキストです。テンプレートによって生成されたテキストはブラウザに送られ(開発ツールで見ることができます)、ブラウザは生成されたコードを実行します。 2つは完全に別々のプロセスです。 – 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さん、ありがとうございました。あなたはこの問題について私に理解してくれました;)

関連する問題