Question

我有这个js代码（它是谷歌地图的一个示例），可以在谷歌地图上构建痕迹。对于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，那么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.
}

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

2 个答案: