Google Directions API-呈现路线而没有腿

Question

我的Google Direction API显示了我的路线，定义者：

(base) -> origin -> waypoints[] -> destination -> (base):

代码看起来像这样。

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;

var origin = document.getElementById('origin');
var waypoints = [];
var waypointElements = document.getElementsByName('waypoints[]');
for(var i=0; i<waypointElements.length; i++)
{
  waypoints.push({location:waypointElements[i].value,stopover:true});
}
var destination = document.getElementById('destination');

directionsService.route({origin:origin.value,
                         waypoints:waypoints,
                         destination:destination.value,
                         travelMode:'DRIVING'},
      function(response,status)
      {
        if(status === google.maps.DirectionsStatus.OK)
        {
          directionsDisplay.setDirections(response);
        }
      }

如何显示没有前腿或后腿的路线（从基地到起点，从目的地到基地）。我的路线计算从基准点到起点，然后再经过航路点到目的地，再回到基准点的整个BUS行程。我想对所有这些点进行路线计算，但只想显示从原点经航点到目的地的路线（没有基本的额外距离）。

我可以在不开始和结束起点的情况下进行一条路线，而不必在起点和终点之间进行另一条路线，但是我不想两次获取Google Directions数据！

实际上，问题是，如何从Google请求完整的路线（具有起点和终点），如何从响应对象中删除起点和终点，并将此“修剪后的”路线响应提供给directionsDisplay？

Answer 1

您可以使用array.slice从response返回的DirectionsService上移除支脚。

if (status === google.maps.DirectionsStatus.OK) {
  // remove the first and last legs from the response legs array
  response.routes[0].legs = response.routes[0].legs.slice(1,response.routes[0].legs.length-1);
  directionsDisplay.setDirections(response);
} else console.log("Directions request failed, status=" + status)

proof of concept fiddle

代码段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var origin = document.getElementById('origin');
  var waypoints = [];
  var waypointElements = document.getElementsByName('waypoints[]');
  console.log("origin=" + origin.value);
  for (var i = 0; i < waypointElements.length; i++) {
    console.log("waypoint[" + i + "]=" + waypointElements[i].value);
    waypoints.push({
      location: waypointElements[i].value,
      stopover: true
    });
  }

  var destination = document.getElementById('destination');
  console.log("destination=" + destination.value);

  directionsService.route({
      origin: origin.value,
      waypoints: waypoints,
      destination: destination.value,
      travelMode: 'DRIVING'
    },
    function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        console.log(response.routes[0])
        response.routes[0].legs = response.routes[0].legs.slice(1, response.routes[0].legs.length - 1);
        directionsDisplay.setDirections(response);
      } else console.log("Directions request failed, status=" + status)
    })

}

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}

#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  height: 400px;
  float: left;
  text-align: left;
  padding-top: 0;
}

<div id="map"></div>
<div id="right-panel">
  <div>
    <b>Start:</b>
    <input id="origin" value="Newark, NJ" />
    <br>
    <b>Waypoints:</b> <br>
    <input value="Weehawken, NJ 07086, USA" name="waypoints[]" />
    <input value="Hoboken, NJ, USA" name="waypoints[]" />
    <input value="City Hall Park, New York, NY 10007, USA" name="waypoints[]" />
    <br>
    <b>End:</b>
    <input id="destination" value="Newark, NJ">
  </div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>