在谷歌地图API上显示gpx数据

时间:2016-04-12 14:19:59

标签: javascript jquery google-maps google-maps-api-3 gpx

我有一个大问题。我想在我的网站上收回我的gpx数据,但我不知道问题出在哪里......

Chrome控制台说:

  

InvalidValueError:在属性路径中:在索引0处:不是LatLng或LatLngLiteral:在属性lat中:不是数字

    google.load('visualization', '1', {packages: ['columnchart']});

$.ajax({
url: "cartes/map.gpx",
type: "GET",
datatype: "xml",
success:function(xml){

    var lat = new Array();
    var lng = new Array();
    var coordonneesMap = new Array();
    var samples = 256;
    var i = 0;

    $(xml).find("trkpt").each(function(){
        lat[i] = $(this).attr("lat");
        lng[i] = $(this).attr("lon");

        i++;
    });

    var maxPath = Math.round(lat.length / samples);
    console.log(maxPath);
    var path = [];

    if ( maxPath > 1)
    {
        for(var i in lat)
        {
            if(( i %maxPath ) == 0) path.push({'lat':lat[i],'lng':lng[i]});
        }
    }

    console.log(path)

    var elevator = new google.maps.ElevationService;

    elevator.getElevationAlongPath({
        'path': path,
        'samples': samples
    }, plotElevation);


}
});

function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== google.maps.ElevationStatus.OK) {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

1 个答案:

答案 0 :(得分:1)

制作lat / lng值数字:

$(xml).find("trkpt").each(function(){
    lat[i] = parseFloat($(this).attr("lat"));
    lng[i] = parseFloat($(this).attr("lon"));
    i++;
});

或者:

if(( i %maxPath ) == 0) path.push({'lat':parseFloat(lat[i]),'lng':parseFloat(lng[i])});