자바 스크립트를 사용하여 excel (xlsx) 파일에서 업로드 한 Google지도의 마커

Question

내 앱을 찾고 있습니다. 데이터로 파일을 업로드 한 다음 여러 마커가있는 Google지도 파일의 모든 데이터를 표시해야합니다. 엑셀 및 마커를 표시하는 데 사용 (I 사용자가 데이터 파일을 제출하려는)에서

<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> 

하지만 어떻게 업로드 할 수있는 데이터 : 이미 두 번째 부분에 대한 해결책을 발견 (다중 구글지도에 마커를 표시)?
나는 완전히 프로그래밍에 익숙하므로 어떤 도움을 주시면 감사하겠습니다 :)

Answer 1

SheetJS을 사용하면 javascript에서 Excel 파일을 구문 분석 할 수 있습니다. 그들에는 .xls 및 .xlsx 파일을위한 2 개의 분리되는 버전이있다.

SheetJS/js - xls

SheetJS/ js - xlsx

당신은 ajax를 사용하여 엑셀 시트를로드 할 수 있습니다. 사용자가 입력 한 엑셀 시트를 직접 파싱하려면 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>

당신은에서 excel_reader.php 얻을 수있는 경우 당신은, 5 월의 방법을 사용할 수 있습니다 이 링크 아래

http://coursesweb.net/php-mysql/read-excel-file-data-php_pc