Google 路线 API - 渲染没有腿的路线

Question

我有 Google 方向 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 行程，从基地到起点，然后通过 waypoints 到目的地，最后回到基地。我想对所有这些点进行路线计算，但只想显示从起点 waypoints 到目的地的路线（没有基本额外距离）。

我可以在没有起点和终点基地的情况下走一条路线，在没有起点和终点的情况下走另一条路线，但如果不需要的话，我不想两次获取 Google 路线数据！

所以问题实际上是，如何从 Google 请求完整路线（包括起始和结束碱基），从响应对象中删除起始和结束碱基，并将此 "trimmed" 路线响应提供给directionsDisplay?

Answer 1

您可以使用 array.slice to remove legs from the response returned from the 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>

Google 路线 API - 渲染没有腿的路线

Google Directions API - rendering route without some legs

google-maps

routes

google-maps-api-3