Question

所以我试图在地图中添加一些位置。用户可以上传csv文件（当然是我的特定格式），但由于某些原因它无法正常工作。

要运行此代码，您需要使用google maps api key。我使用jQuery来读取文件并解析它，然后当我循环它时，我尝试添加标记但没有成功。

我将非常感谢您的帮助。

     <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="jquery.csv.js"></script>
</head>
<body>

<div id="page-wrapper">

  <h1>CSV File to JS Object Test</h1>
  <div>
    Select a CSV file:

  </div>
  <pre id="fileDisplayArea"></pre>
</div>
 <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>
<div id="map" style="width:100%;height:500px"></div>

<script>


function myMap() {
  var myCenter = new google.maps.LatLng(34.0742,32.800);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: myCenter,
    zoom: 6,
    panControl: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true
    };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter,animation:google.maps.Animation.BOUNCE});
  marker.setMap(map);
  var infowindow = new google.maps.InfoWindow({
    content: "Hello World!"
  });
  google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });





}



    $(document).ready(function() {
      if(isAPIAvailable()) {
        $('#files').bind('change', handleFileSelect);
      }
    });

    function isAPIAvailable() {
      // Check for the various File API support.
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
        return true;
      } else {
        // source: File API availability - http://caniuse.com/#feat=fileapi
        // source: <output> availability - http://html5doctor.com/the-output-element/
        document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
        // 6.0 File API & 13.0 <output>
        document.writeln(' - Google Chrome: 13.0 or later<br />');
        // 3.6 File API & 6.0 <output>
        document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
        // 10.0 File API & 10.0 <output>
        document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
        // ? File API & 5.1 <output>
        document.writeln(' - Safari: Not supported<br />');
        // ? File API & 9.2 <output>
        document.writeln(' - Opera: Not supported');
        return false;
      }
    }

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var file = files[0];

      // read the file metadata
      var output = ''
          output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
          output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
          output += ' - FileSize: ' + file.size + ' bytes<br />\n';
          output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

      // read the file contents
      printTable(file);

      // post the results
      $('#list').append(output);
    }

    function printTable(file) {
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(event){
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        var html = '';
        for(var row in data) {
          html += '<tr>\r\n';
           console.log(data[row][2],data[row][3],data[row][4]);
           marker = new google.maps.Marker({
           position: new google.maps.LatLng(parseFloat(data[row][3]), parseFloat(data[row][4])),
           setMap: map
});

          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
        $('#contents').html(html);


      };
      reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
    }


  </script>



  <hr />
  <output id="list">
  </output>
  <hr />
  <table id="contents" style="width:100%; height:400px;" border>
  </table>


<script src="https://maps.googleapis.com/maps/api/js?key=ENTERKEYHERE&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
</body>
</html>

Answer 1

您的代码中有拼写错误。 setMap没有google.maps.Marker属性（应该是map）：

marker = new google.maps.Marker({
  position: new google.maps.LatLng(parseFloat(data[row][3]), parseFloat(data[row][4])),
  setMap: map
});

应该是：

marker = new google.maps.Marker({
  position: new google.maps.LatLng(parseFloat(data[row][3]), parseFloat(data[row][4])),
  map: map
});

上传csv文件并向谷歌地图添加多个标记

1 个答案: