Javascript 从多段线坐标阵列创建立面轮廓

我使用坐标数组创建了一条多段线，代码改编自

尽管第一种（可能是最差的）建造管线的方法只是一个巨大的lat/lng点列表。我仍然在学习编程技巧，很抱歉。我是地理学家，不是程序员

我想从该线获取高程，并创建高程纵断面图。 我是JS新手，不知道如何调试不起作用的东西。我似乎无法用多段线的坐标填充路径数组

其当前设置为将BikeCourse坐标推送到一个新数组，然后该数组将用作路径。我试着用bikeCourseCordinations数组作为“路径”，但也没用

在线（但非工作版本）此处：

---

函数drawPath（）{
//在立面图分区中创建新图表。
chart=新的google.visualization.ColumnChart（document.getElementById（'elevation_chart'））；
var路径=新数组；
推送路径（bikecourse坐标）；
//使用此数组创建PathElevationRequest对象。
var路径请求={
“路径”：路径，
“样本”：256
}
//启动路径请求。
电梯.GetElevationLongPath（路径请求，绘图高程）；
}
//获取ElevationResult对象数组，在地图上绘制路径
//并在可视化API柱形图上绘制高程剖面。
功能图高程（结果、状态）{
if（status==google.maps.ElevationStatus.OK）{
高程=结果；
//从返回的结果中提取高程样本
//并将它们存储在一组板条中。
var提升路径=[]；
对于（var i=0；i

我找不到问题，但以下是一些可能有帮助的观察结果：

我只是用bikeCourseCordinates数组作为“路径”进行了尝试。

根据Maps API，

pathRequest

应为：

var pathRequest = {
    'path': bikeCourseCoordinates,
    'samples': 256
}

此外，我认为以下最初部分，即：

var whitney = new google.maps.LatLng(36.578581, -118.291994);
...
...
var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
var badwater = new google.maps.LatLng(36.23998, -116.83171);

var bikeCourseCoordinates = [
            new google.maps.LatLng(47.67609435030702, -116.7896032333374),

它直接位于第一个内联

标记中，应仅在加载地图库后调用。我会把它全部放在另一个函数中，比如说

myInit

，然后从当前名为

initialize

的函数中调用

myInit

---

上面的原因是，尽管您将脚本标记包括在maps api

maps.googleapis.com/maps/api/js？sensor=false

中，但浏览器将继续执行包含

whitney=new google.maps.Lat

的下一个脚本块，因为maps.googleapis.com是一个外部脚本，我认为这些脚本是外部脚本脚本是异步加载的。

您是否试图在该页面上复制第三个示例

如果是，我已经做了，但没有图形覆盖效果

这是我的密码

这在你脑子里

script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"
script type="text/javascript" src="https://www.google.com/jsapi"
script src="https://www.google.com/uds/?file=visualization&v=1&packages=columnchart" type="text/javascript"

这个在页脚上，就在body标签前面

var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;
var mapCenter = new google.maps.LatLng(-21.745585792425,165.91141052497);


// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {packages: ["columnchart"]});


function initialize() {
    var mapOptions = {
        center: mapCenter,
        zoom: 13,
        mapTypeId: 'terrain'
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Create an ElevationService.
    elevator = new google.maps.ElevationService();

    // Draw the path, using the Visualization API and the Elevation service.
    drawPath();
}


function drawPath() {

    // Create a new chart in the elevation_chart DIV.
    chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));

    var path = bikeCourseCoordinates;

    // Create a PathElevationRequest object using this array.
    // Ask for 256 samples along that path.
    var pathRequest = {
        'path': path,
        'samples': 256
    }

    // Initiate the path request.
    elevator.getElevationAlongPath(pathRequest, plotElevation);
}



function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < results.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // Display a polyline of the elevation path.
    var pathOptions = {
      path: elevationPath,
      strokeColor: '#0000CC',
      opacity: 0.9,
      map: map
    }
    polyline = new google.maps.Polyline(pathOptions);

    // 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 < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation-chart').style.display = 'block';
    chart.draw(data, {
      width: 960,
      height: 300,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}



initialize();

var电梯；
var映射；
var图；
var infowindow=new google.maps.infowindow（）；
var多段线；
var mapCenter=new google.maps.LatLng（-21.745585792425165.91141052497）；
//加载可视化API和columnchart包。
load（“可视化”、“1”、{packages:[“columnchart”]}）；
函数初始化（）{
变量映射选项={
中心：地图中心，
缩放：13，
mapTypeId:'地形'
};
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
//创建一个提升服务。
电梯=新的google.maps.ElevationService（）；
//使用可视化API和立面服务绘制路径。
绘图路径（）；
}
函数drawPath（）{
//在立面图分区中创建新图表。
chart=新的google.visualization.ColumnChart（document.getElementById（'elevation-chart'））；
var path=BIKECOURSE坐标；
//使用此数组创建PathElevationRequest对象。
//沿着该路径要求256个样本。
var路径请求={
“路径”：路径，
“样本”：256
}
//启动路径请求。
电梯.GetElevationLongPath（路径请求，绘图高程）；
}
功能图高程（结果、状态）{
if（status==google.maps.ElevationStatus.OK）{
高程=结果；
//从返回的结果中提取高程样本
//并将它们存储在一组板条中。
var提升路径=[]；
对于（var i=0；ivar elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;
var mapCenter = new google.maps.LatLng(-21.745585792425,165.91141052497);


// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {packages: ["columnchart"]});


function initialize() {
    var mapOptions = {
        center: mapCenter,
        zoom: 13,
        mapTypeId: 'terrain'
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Create an ElevationService.
    elevator = new google.maps.ElevationService();

    // Draw the path, using the Visualization API and the Elevation service.
    drawPath();
}


function drawPath() {

    // Create a new chart in the elevation_chart DIV.
    chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));

    var path = bikeCourseCoordinates;

    // Create a PathElevationRequest object using this array.
    // Ask for 256 samples along that path.
    var pathRequest = {
        'path': path,
        'samples': 256
    }

    // Initiate the path request.
    elevator.getElevationAlongPath(pathRequest, plotElevation);
}



function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < results.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // Display a polyline of the elevation path.
    var pathOptions = {
      path: elevationPath,
      strokeColor: '#0000CC',
      opacity: 0.9,
      map: map
    }
    polyline = new google.maps.Polyline(pathOptions);

    // 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 < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation-chart').style.display = 'block';
    chart.draw(data, {
      width: 960,
      height: 300,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}



initialize();