JavaScriptのcsvファイルからデータを読み取る

-1

私はマップにcsvデータでドットを入れようとしています。 CSVの私はフィールドの緯度と経度を持っています... どうすればいいですか？おそらくcsvから配列を取得し、それを使用しますか？ここ..JavaScriptのcsvファイルからデータを読み取る

を、私は、多くのことを試してみましたが、何も働いていないが、私のコードです：

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <script src="http://www.webglearth.com/v2/api.js"></script> 
 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
    <script> 
 
     function initialize() { 
 
      var earth = new WE.map('earth_div'); 
 
      WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth); 
 
    
 
      //get the csv file data, create new marker [latitude,longitude] 
 
      //the bind popup will get the field country 
 

 
     for (var i = 0; i < 5; i++) 
 
     { 
 
      var marker = WE.marker([i,i]).addTo(earth); 
 
      marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />" 
 
       , { maxWidth: 150, closeButton: true }).closePopup(); 
 
     }//end for i 
 

 
     var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth); 
 

 
     earth.setView([0, 0], 3); 
 
     } 
 
    </script> 
 
    <style> 
 
     html, body { 
 
      padding: 0; 
 
      margin: 0; 
 
      background-color: black; 
 
     } 
 

 
     #earth_div { 
 
      top: 0; 
 
      right: 0; 
 
      bottom: 0; 
 
      left: 0; 
 
      position: absolute !important; 
 
     } 
 
    </style> 
 
    <title>WebGL Earth API: Markers</title> 
 
</head> 
 
<body onload="initialize()"> 
 
    <div id="earth_div"></div> 
 
</body> 
 
</html>

出典

2017-07-10 Nadav

地図 – moh89

私のためのコードを書くことができますか？私はどのようにわからない... – Nadav

[リンク]（https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript）これを見ることができます。 – moh89

はあなたのためにこの仕事をしていますか？ボタンでcsvファイルを選択すると、スクリプトはそのファイルをページに表示します。

のindex.html：

<!DOCTYPE HTML> 
<html> 
<head> 
    <script src="http://www.webglearth.com/v2/api.js"></script> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <style> 
     html, body { 
      padding: 0; 
      margin: 0; 
      background-color: black; 
     } 

     #earth_div { 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      position: absolute !important; 
     } 
     #files { 
      top: 0; 
      left: 0; 
      position: absolute; 
      z-index: 999; 
     } 
    </style> 
    <title>WebGL Earth API: Markers</title> 
</head> 
<body> 
    <input type="file" id="files" name="file" /> 
    <div id="earth_div"></div> 
    <script> 
     var earth = new WE.map('earth_div'); 
     WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth); 
     var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth); 
     earth.setView([0, 0], 3); 
     document.getElementById('files').onchange = function() { 
      readFile(); 
     }; 
     function readFile() { 
      var files = document.getElementById('files').files; 
      if (!files.length) { 
       alert('Please select a file!'); 
       return; 
      } 
      var file = files[0]; 
      var start = 0; 
      var stop = file.size - 1; 
      var reader = new FileReader(); 
      reader.onloadend = function(evt) { 
       if (evt.target.readyState == FileReader.DONE) { 
        var text = evt.target.result; 
        var lines = text.split('\n'); 
        for (var i = 0; i < lines.length; i++) { 
         lines[i] = lines[i].split(','); 
         lines[i].map(function(val) { 
          return Number(val); 
         }); 
        } 
        for (var i = 0; i < lines.length; i++) { 
         var marker = WE.marker([lines[i][0], lines[i][1]]).addTo(earth); 
         marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />" 
          , { maxWidth: 150, closeButton: true }).closePopup(); 
        } 
       } 
      } 
      var blob = file.slice(start, stop + 1); 
      reader.readAsBinaryString(blob); 
     } 
    </script> 
</body> 
</html>

points.csv：私はuがマップ内のラインの調整に使用される特殊な番号でソートされた配列を作成し、ウルにそれらを呼び出すために持っていると思う

1,1 
2,2 
3,3 
4,4

出典

2017-07-10 18:42:20 JakeBoggs

はい！ありがとう！今すぐ、ファイルを選択しなくてもファイルを読み込むことはできますか？私のファイル名は "mycsv2.csv"で、私はそれからcolsの緯度と経度を除外します – Nadav

ファイルにajax要求を行い、それを表示することができます。 – JakeBoggs

私はcsvで必要なcolsを呼び出す方法を知っています。どうすればファイルを自動的に読み込むことができますか？私はどのようにajaxを使用するのかわかりません。 – Nadav

JavaScriptのcsvファイルからデータを読み取る

答えて

関連する問題