Как я могу изменить маршрут, предоставленный мне по API направления в Интернете?

Question

Я не знаю, как изменить маршрут, предоставленный мне вручную по маршруту API маршрутов.

Я уже некоторое время просматриваю сеть и еще ничего не искал.

Как вручную изменить маршрут, предоставленный мне API маршрутов?Например, если в маршруте есть трафик, я хочу изменить маршрут, чтобы избежать этого трафика.

Answer 1

Вы можете сделать 2 возможных вещи:

1. Запросить альтернативные маршруты при наличии (provideRouteAlternatives: true)
2. Установить для draggable DirectionsRendererOption значениеtrue, позволяющий вручную перетащить маршрут для его изменения.

Вот полный пример, который показывает оба метода в действии:

var directionsService;
var map;

function initialize() {

  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  }

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  directionsService = new google.maps.DirectionsService();

  var start = "Bordeaux, France";
  var end = "Valence, France";

  plotDirections(start, end);
}

function plotDirections(start, end) {

  var method = 'DRIVING';

  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method],
    provideRouteAlternatives: true
  };

  directionsService.route(request, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {

      var routes = response.routes;
      var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'black'];
      var directionsDisplays = [];

      // Reset the start and end variables to the actual coordinates
      start = response.routes[0].legs[0].start_location;
      end = response.routes[0].legs[0].end_location;

      // Loop through each route
      for (var i = 0; i < routes.length; i++) {

        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map,
          directions: response,
          routeIndex: i,
          draggable: true,
          polylineOptions: {

            strokeColor: colors[i],
            strokeWeight: 4,
            strokeOpacity: .3
          }
        });

        // Push the current renderer to an array
        directionsDisplays.push(directionsDisplay);

        // Listen for the directions_changed event for each route
        google.maps.event.addListener(directionsDisplay, 'directions_changed', (function(directionsDisplay, i) {

          return function() {

            var directions = directionsDisplay.getDirections();
            var new_start = directions.routes[0].legs[0].start_location;
            var new_end = directions.routes[0].legs[0].end_location;

            if ((new_start.toString() !== start.toString()) || (new_end.toString() !== end.toString())) {

              // Remove every route from map
              for (var j = 0; j < directionsDisplays.length; j++) {

                directionsDisplays[j].setMap(null);
              }

              // Redraw routes with new start/end coordinates
              plotDirections(new_start, new_end);
            }
          }
        })(directionsDisplay, i)); // End listener
      } // End route loop
    }
  });
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>