Google maps Google Maps Javascript API：沿一个方向的高程图

我正在使用谷歌地图API来建立一个网站，但我在建立立面图时遇到了问题。但它指的是申报一些航路点，这与我的情况不同。我使用的是Directions API，所以Google会自动构建路径

这是我的密码：

    <script>
      function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            mapTypeId: 'terrain',
            disableDefaultUI: true,
            fullscreenControl: true,
            scaleControl: true,
            zoomControl: true
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var mapTravelMode = "DRIVING";
        var mapOrigin = {lat: 46.573240, lng: 26.927229};
        var mapDestination = {lat: 46.517151, lng: 27.081692};
        var waypts = [
        {location: {lat:46.5857174, lng: 26.9553385}, stopover: false},
        {location: {lat:46.581699, lng: 26.999611}, stopover: false},
        ];

        directionsService.route({
          origin: mapOrigin,  // Origin.
          destination: mapDestination,  // Destination.
          waypoints: waypts, // Waypoints
          travelMode: google.maps.TravelMode[mapTravelMode],
          avoidHighways: true,
          avoidTolls: true,
          optimizeWaypoints: true
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
            console.log(response);
          } else {
            window.alert('[directionsService] A aparut o eroare: ' + status);
          }
        });

      }
    </script>

函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
mapTypeId:'地形'，
disableDefaultUI:true，
全屏控制：正确，
scaleControl：对，
动物控制：正确
});
方向显示.setMap（地图）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
var mapTravelMode=“驾驶”；
var mapOrigin={lat:46.573240，lng:26.927229}；
var mapDestination={lat:46.517151，lng:27.081692}；
var waypts=[
{地点：{lat:46.5857174，lng:26.9553385}，中途停留：false}，
{地点：{lat:46.581699，lng:26.999611}，中途停留：false}，
];
方向服务.路线({
原点：mapOrigin，//原点。
目的地：mapDestination，//目的地。
航路点：航路点，//航路点
travelMode:google.maps.travelMode[mapTravelMode]，
避免：是的，
避免：是的，
优化航路点：正确
}，功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
控制台日志（响应）；
}否则{
window.alert（“[directionsService]A aparut o eroare:”+状态）；
}
});
}

---

有人可以帮我吗？

将从方向服务返回的路径传递给立面服务

在来自directions服务的回调中，将返回结果中的overview_路径作为路径传递给

GetRelationalOngPath

函数

if (status == 'OK') {
    directionsDisplay.setDirections(response);
    elevationService.getElevationAlongPath({
      path: response.routes[0].overview_path,
      samples: SAMPLES
    }, plotElevation);

    console.log(response);
  } else {
    window.alert('[directionsService] error: status: ' + status);

其中，对立面服务的回调为：

  // Takes an array of ElevationResult objects 
  // and plots the elevation profile on a GViz ColumnChart
  function plotElevation(results) {
    elevations = results;

    var path = [];
    for (var i = 0; i < results.length; i++) {
      path.push(elevations[i].location);
    }

    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]);
    }

    document.getElementById('chart_div').style.display = 'block';
    chart.draw(data, {
      width: 512,
      height: 200,
      legend: 'none',
      titleY: 'Elevation (m)',
      focusBorderColor: '#00ff00'
    });
  }

var样本=256；
var mousemarker=null；
var polyline=null；
//加载可视化API和piechart包。
加载（“可视化”，“1”{
软件包：[“柱形图”]
});
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（initMap）；
函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
mapTypeId:'地形'，
disableDefaultUI:true，
全屏控制：正确，
scaleControl：对，
动物控制：正确
});
chart=新的google.visualization.ColumnChart（document.getElementById（'chart_div'））；
elevationService=新的google.maps.elevationService（）；
方向显示.setMap（地图）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
var mapTravelMode=“驾驶”；
var mapOrigin={
拉脱维亚：46.573240，
液化天然气：26.927229
};
var mapDestination={
纬度：46.517151，
液化天然气：27.081692
};
var waypts=[{
地点：{
纬度：46.5857174，
液化天然气：26.9553385
},
中途停留：错误
},
{
地点：{
拉脱维亚：46.581699，
液化天然气：26.999611
},
中途停留：错误
},
];
方向服务.路线({
原点：mapOrigin，//原点。
目的地：mapDestination，//目的地。
航路点：航路点，//航路点
travelMode:google.maps.travelMode[mapTravelMode]，
避免：是的，
避免：是的，
优化航路点：正确
}，功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
elevationService.GetElevationOngPath({
路径：响应。路由[0]。概述\u路径，
样本：样本
}，标绘高程）；
控制台日志（响应）；
}否则{
window.alert（“[directionsService]A aparut o eroare:”+状态）；
}
});
}
//获取ElevationResult对象数组，在地图上绘制路径
//并在GViz柱形图上绘制高程剖面
功能图高程（结果）{
高程=结果；
var路径=[]；
对于（var i=0；i

@geocodezip如果我使用这4个点（起点、终点和2个航路点）调用图形，图形将显示直线的高程，而不是显示的确切路径/方向。您需要将从方向服务返回的路径传递到高程服务。我对JS非常陌生。你知道我该怎么做吗？添加了一个答案，用你的代码演示上述内容。