Использовать Google Directions API для рисования нескольких маршрутов? - PullRequest
0 голосов
/ 25 сентября 2019

Я внедряю систему, чтобы показать множество маршрутов со всеми остановками, которые должны делать каждый автомобиль на одной карте.У меня есть контроллер для выбора маршрута для показа на карте.Теперь я могу отображать маркеры всех маршрутов, но не все полилинии только один раз.Когда выбрано больше маршрутов, отображаются все маркеры, кроме полилиний последнего выбранного магазина.

Вот мой код

let map;
let directionsService;
let directionsRenderer
let markers = [];
let waypoints = [];
let uluru = {lat: -1.2571434, lng: -78.6566384};

function initMap() {
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();

  map = new google.maps.Map(
      document.getElementById('map'), {zoom: 7, center: uluru, mapTypeId: 'roadmap'});
  directionsRenderer.setMap(map);
}
function addMarkers(routeName) {
  var c = coordinates[routeName]
  var pinColor = getRandomColor();
  var waypoints = [];

  c.forEach(function (item, index) 
  { 
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+ index +"|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var myLatLng = { lat: item[1][0], lng: item[1][1] };

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      icon: pinImage,
      title: routeName
    });

    markers.push(marker);
    waypoints.push({location: myLatLng, stopover: false});
  });

  if( typeof waypoints != 'undefined' && waypoints != null ){
    var polylineOptionsActual = {
      strokeColor: '#' + pinColor,
      strokeOpacity: 1.0,
      strokeWeight: 3
      };
      calculateAndDisplayRoute(waypoints, polylineOptionsActual);
    }
}

function calculateAndDisplayRoute(waypts, polylineOptionsActual) {
  directionsRenderer.setOptions( { suppressMarkers: true, polylineOptions: polylineOptionsActual } );
  var origin1 = waypts.shift().location;
  var destination1 = waypts.pop().location;
  directionsService.route(
  {
    origin: origin1,
    destination: destination1,
    waypoints: waypts,
    optimizeWaypoints: true,      
    travelMode: 'DRIVING'
  },
  function(response, status) {
    if (status === 'OK') {
      directionsRenderer.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

Пример того, что показывает приложение актуально

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...