Google Maps API: несколько направлений / маршрутов на одной карте - PullRequest
Новая
       63

Google Maps API: несколько направлений / маршрутов на одной карте

0 голосов
/ 06 октября 2018

У меня проблема с отображением нескольких маршрутов на одной карте Google.

У меня есть список позиций, который я получаю от своего контроллера (в этой форме). 

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
     0:
     arriveeLat: 48.784
     arriveeLng: 2.40735
     departLat: 48.9016
     departLng: 2.29873

Я бы хотел, чтобы все маршруты отображались на одной карте. В настоящее время отображается только один (вероятно, последний) 

var map;
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
    directionsDisplay.setMap(map);



  var listPos = <?php echo json_encode($listPos); ?>;

  for (var i = 0; i < listPos.length; i++) {

    var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
    var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);

    calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);

  }

}


  function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint) {
    directionsService.route({
      origin: startPoint,
      destination: endPoint,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {

        directionsDisplay.setDirections(response);
      } else {
        window.alert('Impossible d afficher la route ' + status);
      }
    });
  }

1 Ответ

0 голосов
/ 06 октября 2018

Если вы хотите отобразить несколько ответов от сервера directionsService на карте Google Maps Javascript API v3, вам необходимо создать DirectionsRenderer для каждого отображаемого маршрута: 

for (var i = 0; i < listPos.length; i++) {
  var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
  var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
  var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
  calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);
}

(Примечание: если вы хотите что-то сделать с маршрутами позже, например скрыть их, вам нужно будет сохранить ссылки на объекты DirectionRenderer для последующего использования).

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

screenshot of resulting map

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

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<div id="output"></div>
<div id="map"></div>
<script>
  var map;

  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });

    var listPos = [{
        arriveeLat: 48.784,
        arriveeLng: 2.2743419,
        departLat: 48.9016,
        departLng: 2.29873
      },
      {
        arriveeLat: 48.8245306,
        arriveeLng: 2.40735,
        departLat: 48.799815,
        departLng: 2.257289
      },
    ];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < listPos.length; i++) {

      var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
      var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        preserveViewport: true
      });
      calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint, bounds);
    }

  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint, bounds) {
    directionsService.route({
      origin: startPoint,
      destination: endPoint,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        bounds.union(response.routes[0].bounds);
        map.fitBounds(bounds);
      } else {
        window.alert('Impossible d afficher la route ' + status);
      }
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
...