javascript - 谷歌地图 API : multiple direction/route on same map

Question

我在同一个 Google map 上显示多条路线时遇到问题。

我有一个从我的 Controller 获得的位置列表(以这种形式)。

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

我想让所有路线都显示在同一张 map 上。目前只显示一条(可能是最后一条)

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

Answer 1

如果您想在 Google Maps Javascript API v3 map 上显示 DirectionsService 的多个响应，则需要创建 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 对象的引用以供以后使用)。

proof of concept fiddle

代码片段:

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>