使用Javascript从Excel（xlsx）file upload的谷歌地图上的标记

我在为我的应用程序寻找解决scheme。 我需要上传Excel文件的数据，然后显示在多个标记的谷歌地图上的文件的所有数据。 我已经find第二部分的解决scheme（在Google地图上显示多个标记）：

<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

您可以使用SheetJSparsingJavaScript中的Excel文件。 他们有两个单独的版本.xls和.xlsx文件。

• SheetJS / js – xls
• SheetJS / js – xlsx

你可以使用ajax加载excell表格。 如果要直接parsing用户input的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" /> 

Answer 2

你可以使用可能的方式，如果你喜欢使用PHP，那么这是代码

 <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 = []; <?php include 'excel_reader.php'; // include the class $excel = new PhpExcelReader; // creates object instance of the class $excel->read('excel_file.xls'); // reads and stores the excel file data // Test to see the excel data stored in $sheets property $data = $excel->sheets; while() { echo "locations.push ({name:'".$data[i]['name']."', latlng: new google.maps.LatLng(".$data[i]['la'].", ".$data[i]['lng'].")});" } php?> 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>