如何使用 csv 文件作为 Google Maps JavaScript API 的输入

Question

我有这个 js 代码（它是 Google Maps 的示例），它在 Google Maps 上构建跟踪。对于 4 个坐标，很好，但我想为 100 个坐标绘制轨迹，手动操作会很痛苦。我怎么做？

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 30.20, lng: -97.7},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var flightPlanCoordinates = [
      {lat: 30.2359091167, lng: -97.7951395833},
      {lat: 30.2691029532, lng: -97.7493953705},
      {lat: 30.2557309927, lng: -97.7633857727},
      {lat: 30.2634181234, lng: -97.7575966669},
      {lat: 30.2742918584, lng: -97.7405226231}
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }

Answer 1

您可以尝试创建一个函数来将 CSV 转换为 JSON 格式吗？即

function csvToJSONCoordinates(data) {
    //Define an empty array for output
    output = [];
    //Split the data by lines
    lines = data.split("\n");
    //For every line recognised
    for(i=0;i<lines.length;i++) {
        //Split the data into latitude and longitude
        coords = lines[i].split(",");
        //Pus these coordinates to the output
        output.push({lat:coords[0], lng:coords[1]});
    }

    //Return the final output
    return output;
}

个人经验表明，随着时间的推移，JSON 数据是最容易管理的，并且最近与可用的映射 API 进行了大量合作，如果您可以将其他格式转换为 JSON，那么它是迄今为止最具扩展性的数据。

Answer 2

抱歉，我花了一段时间才回到这里。我处理了这段代码。我将处理异步数据。这是根据您告诉我的外观示例 CSV。

var dataCSV = 'latitude,longitude\n\
               38.631913,-121.434879\n\
               38.478902,-121.431028\n\
               38.618305,-121.443839\n\
               38.616835,-121.439146\n\
               38.51947,-121.435768\n\
               38.662595,-121.327813\n\
               38.681659,-121.351705\n\
               38.535092,-121.481367\n\
               38.621188,-121.270555\n\
               38.700909,-121.442979\n\
               38.637663,-121.45152\n\
               38.470746,-121.458918\n\
               38.618698,-121.435833\n\
               38.482215,-121.492603\n\
               38.672914,-121.35934\n\
               38.700051,-121.351278\n\
               38.689591,-121.452239\n\
               38.679776,-121.314089\n\
               38.612099,-121.469095\n\
               38.689999,-121.46322\n\
               38.707851,-121.320707\n\
               38.468173,-121.444071\n\
               38.702792,-121.38221\n\
               38.628631,-121.488097\n\
               38.701499,-121.37622\n\
               38.70974,-121.37377\n\
               38.537526,-121.478315\n\
               38.476472,-121.501711\n\
               38.558423,-121.327948\n\
               38.472122,-121.404199\n\
               38.423251,-121.444489\n\
               38.691161,-121.37192\n\
               38.566663,-121.332644\n\
               38.713182,-121.411227\n\
               38.423251,-121.444489\n\
               38.48742,-121.462459\n\
               38.658246,-121.375469\n\
               38.479553,-121.463317\n\
               38.49857,-121.420925\n\
               38.58514,-121.403736\n\
               38.658812,-121.542345\n\
               38.493955,-121.48966\n\
               38.41653,-121.379653\n\
               38.72027,-121.331555\n\
               38.699251,-121.371414\n\
               38.613765,-121.488694\n\
               38.450543,-121.432538';

这是处理 CSV 文件的函数。您可以通过 AJAX 提取 CSV。

function processCSV( myCSV ){
    var data = myCSV.split('\n'); // Converts the CSV into an array split on new line.

    /* This will remove the "latitude,longitude" text from the 
     coordinates if it is the top of the CSV file. If it is not at the 
    top then you can leave this out. */
    var dataShift = data.shift();

    var setData = data.map( function( val ) { // maps over the array.
            var latLng = val.split(',');      // splits each value into lat and lng. 
            return {'lat': latLng[0], 'lng': latLng[1] }; //sets the coordinate object.
        });
    return setData; // returns the data.
}