上传CSV文件至Google Maps添加多标记失败求助

Hey there! Let's get those CSV markers showing up on Google Maps— I've dug into your code and found a few key issues that are blocking the functionality. Here's how to fix them:

1. Fix the Map Variable Scope #

The map object you create in myMap() is locked inside that function's local scope, so when you try to use it in printTable() to add markers, JavaScript can't find it. Let's make map a global variable so it's accessible everywhere:

// Declare map globally outside any function
let map;

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
  };
  // Assign to the global map variable
  map = new google.maps.Map(mapCanvas, mapOptions);
  
  // ... rest of your myMap code remains the same
}

2. Correct Marker Creation Syntax #

You used setMap: map in your Marker options, but the proper property name is just map. This was preventing the marker from being attached to the map. Here's the fixed line:

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

3. Skip the CSV Header Row #

Your loop processes every row in the CSV, including the header (which has text, not latitude/longitude numbers). This would throw errors when trying to parse those strings into coordinates. Let's add a check to skip the first row:

for(var row in data) {
  // Skip the header row (index 0)
  if (row == 0) continue;
  
  // ... rest of your row processing code
}

Full Corrected Code #

Here's the complete working version of your code with all fixes applied:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>CSV to Google Maps Markers</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 Google Maps Markers</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>
    // Global map variable
    let map;

    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
      };
      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() {
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        return true;
      } else {
        document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
        document.writeln(' - Google Chrome: 13.0 or later<br />');
        document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
        document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
        document.writeln(' - Safari: Not supported<br />');
        document.writeln(' - Opera: Not supported');
        return false;
      }
    }

    function handleFileSelect(evt) {
      var files = evt.target.files;
      var file = files[0];
      
      var output = '';
      output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />';
      output += ' - FileType: ' + (file.type || 'n/a') + '<br />';
      output += ' - FileSize: ' + file.size + ' bytes<br />';
      output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />';
      
      printTable(file);
      $('#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) {
          // Skip header row
          if (row == 0) continue;
          
          html += '<tr>';
          console.log(data[row][2],data[row][3],data[row][4]);
          
          // Create marker with correct syntax
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(data[row][3]), parseFloat(data[row][4])),
            map: map
          });
          
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>';
          }
          html += '</tr>';
        }
        $('#contents').html(html);
      };
      
      reader.onerror = function(){
        alert('Unable to read ' + file.name);
      };
    }
  </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> 
</body> 
</html>

Just replace ENTERKEYHERE with your actual Google Maps API key, and make sure your CSV has latitude in column 4 (index 3) and longitude in column 5 (index 4) to match your code. If your CSV uses different columns, adjust the data[row][3] and data[row][4] values accordingly.

内容的提问来源于stack exchange，提问作者VDT