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个文件的两个单独版本。

您可以使用ajax加载excell表格。如果要直接解析用户输入的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

你可以使用may方式，如果你想使用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

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

谷歌地图上的标记使用Javascript

2 个答案: