如何使用CSV文件作爲谷歌地圖的JavaScript API

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是迄今爲止最可擴展的，如果你可以將其他格式轉換到它。

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. 
}