Google Directions API - рендеринг маршрута без каких-либо опор - PullRequest
Новая
       34

Google Directions API - рендеринг маршрута без каких-либо опор

0 голосов
/ 19 мая 2019

У меня есть 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);
        }
      }

Как отобразить маршрут без первого или последнего отрезка (от основания к исходному месту и от пункта назначения к основанию). Мой маршрут рассчитывает всю поездку на автобусе, от базы до пункта отправления, затем через путевые точки до пункта назначения и, наконец, обратно на базу. Я хотел бы иметь расчет маршрута для всех этих точек, но хочу показать только маршрут от пункта отправления через точки маршрута до пункта назначения (без базовых дополнительных расстояний).

Я мог бы сделать один маршрут без начальной и конечной базы, а другой - с ними, но я не хочу получать данные Google Directions дважды, если мне не нужно!

Таким образом, на самом деле вопрос заключается в том, как запросить у Google полный маршрут (с начальной и конечной базой), удалить начальную и конечную базы из объекта ответа и дать этому «обрезанному» маршруту маршрут для directionsDisplay?

1 Ответ

0 голосов
/ 19 мая 2019

Вы можете использовать array.slice, чтобы удалить ноги из ответа , возвращенного из 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)

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

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>
...