Google Maps API:同一张地图上的多个方向/路线 [英] Google Maps API : multiple direction/route on same map

问题描述

在同一张Google地图上显示多条路线时出现问题.

I have a problem displaying several routes on the same Google map.

我有一个从控制器获得的职位列表(采用这种形式).

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

我想使所有路线都显示在同一张地图上.当前，仅显示一条(可能是最后一条)

I would like to make all the routes are displayed on the same map. Currently, only one is displayed (the last one probably)

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);
      }
    });
  }

推荐答案

如果要在Google Maps Javascript API v3地图上显示来自DirectionsService的多个响应，则需要创建

If you want to display multiple responses from the directionsService on a Google Maps Javascript API v3 map, you need to create a DirectionsRenderer for each route you want displayed:

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对象的引用以供以后使用).

(Note: if you want to do anything with the routes later, like hide them, you will need to keep references to the DirectionRenderer objects for later use).

概念提琴证明

代码段:

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

这篇关于Google Maps API:同一张地图上的多个方向/路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！