javascript - 使用 Javascript 从 Excel(xlsx) 文件上传的谷歌地图上的标记

Question

我正在为我的应用程序寻找解决方案。我需要上传包含数据的 Excel 文件，然后使用多个标记在谷歌地图上显示文件中的所有数据。我已经找到了第二部分的解决方案(在谷歌地图上显示多个标记):

 <script>

  function initialize() {
    var mapDiv = document.getElementById('mymap');
    var mapOptions = {          
      center: new google.maps.LatLng (-33.865143, 151.209900),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(mapDiv, mapOptions);

    var locations = [];
    locations.push ({name:"Bondi Beach", latlng: new google.maps.LatLng(-33.890542, 151.274856)});
    locations.push ({name:"Coogee Beach", latlng: new google.maps.LatLng(-33.923036, 151.259052)});
    locations.push ({name:"Cronulla Beach", latlng: new google.maps.LatLng(-34.028249, 151.157507)});
    locations.push ({name:"Manly Beach", latlng: new google.maps.LatLng(-33.80010128657071, 151.28747820854187)});

    for (var i = 0; i < locations.length; i++) {
      var marker = new google.maps.Marker({position: locations[i].latlng, map:map, title:locations[i].name});
    }
  }

  window.onload = initialize;

</script>

但是我如何从 Excel 上传数据(我希望用户提交包含数据的文件)并使用它来显示标记？
我对编程完全陌生，所以任何帮助将不胜感激:)

Answer 1

您可以使用SheetJS在 javascript 中解析 excel 文件。它们有两个单独的 .xls 和 .xlsx 文件版本。

• SheetJS / js - xls
• SheetJS/ js - xlsx

您可以使用 ajax 加载 Excel 工作表。如果你想直接解析用户输入的excel表格，可以使用 FileReader对象及其 .readAsBinaryString()方法。

document.getElementById("excel").addEventListener("change", function(e) {
    var file = e.target.files[0];

    //Verify that the selected file was an supported worksheet file.
    //You can check file.name and file.type properties for this validation

    var reader = new FileReader();

    reader.onload = function(e) {
        var data = e.target.result;

        /* if binary string, read with type 'binary' */
        var workbook = XLS.read(data, {
            type: 'binary'
        });
        
        console.log(workbook.Sheets[workbook.SheetNames[0]]["A1"].v); //Read the value of the A1 cell in the first worksheet
        /* DO SOMETHING WITH workbook HERE */
    };
    reader.readAsBinaryString(file);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.5/xls.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.full.min.js"></script>

<input type="file" id="excel" />