Question

我有多个长/纬标记，想要显示每个标记的完整路线。这意味着我想拥有从A点到B点的路线，然后从B点到C点等等。

我有以下几乎可以使用的代码：

function initMap() {
    var pointA = new google.maps.LatLng(53.3163803, -6.2676661),
        pointB = new google.maps.LatLng(54.6346071, -5.9392891),
        pointC = new google.maps.LatLng(54.9501499, -7.7157642),
        myOptions = {
            zoom: 5,
            center: pointA
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "B",
            map: map
        }),
        markerC = new google.maps.Marker({
            position: pointC,
            title: "point C",
            label: "C",
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
    // get route from B to C
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointB, pointC);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
    directionsService.route({
        origin: pointA,
        destination: pointB,
        avoidTolls: false,
        avoidHighways: false,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            console.error('Directions request failed due to ' + status);
        }
    });
}

initMap();

现在缺少部分，我现在想再次呼叫calculateAndDisplayRoute(directionsService, directionsDisplay, pointB, pointC);以绘制我的第二条路线但是当我这样做时，我不再有从A到B的路线了。

当前的JSFiddle：http://jsfiddle.net/ys01fh1m/

Answer 1

您需要：

每条路线的单独路线渲染器
合并响应并将其发送到单向渲染器
使用航点作为B点

使用不同的DirectionRenderer个对象：

function calculateAndDisplayRoute(directionsService, map, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    avoidTolls: false,
    avoidHighways: false,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map
      });
      directionsDisplay.setDirections(response);
    } else {
      console.error('Directions request failed due to ' + status);
    }
  });
}

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var pointA = new google.maps.LatLng(53.3163803, -6.2676661),
    pointB = new google.maps.LatLng(54.6346071, -5.9392891),
    pointC = new google.maps.LatLng(54.9501499, -7.7157642),
    myOptions = {
      zoom: 5,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    directionsService = new google.maps.DirectionsService(),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    }),
    markerC = new google.maps.Marker({
      position: pointC,
      title: "point C",
      label: "C",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, map, pointA, pointB);
  // get route from B to C
  calculateAndDisplayRoute(directionsService, map, pointB, pointC);
}

function calculateAndDisplayRoute(directionsService, map, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    avoidTolls: false,
    avoidHighways: false,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        suppressMarkers: true,
        preserveViewport: true
      });
      directionsDisplay.setDirections(response);
    } else {
      console.error('Directions request failed due to ' + status);
    }
  });
}

initMap();

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map-canvas'></div>

＆＃13;

合并回复

function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    responses.push(response);
    if (responses.length > 1) {
      for (var i = 0; i < (responses.length - 1); i++) {
        // combine the bounds
        response.routes[0].bounds.union(responses[i].routes[0].bounds)
        // combine the legs
        for (var j = 0; j < responses[i].routes[0].legs.length; j++)
          response.routes[0].legs.push(responses[i].routes[0].legs[j]);
      }
      directionsDisplay.setDirections(response);
    }
  } else {
    console.error('Directions request failed due to ' + status);
  }
});

proof of concept fiddle

代码段

＆＃13;

var responses = [];

function initMap() {
  var pointA = new google.maps.LatLng(53.3163803, -6.2676661),
    pointB = new google.maps.LatLng(54.6346071, -5.9392891),
    pointC = new google.maps.LatLng(54.9501499, -7.7157642),
    myOptions = {
      zoom: 5,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    directionsService = new google.maps.DirectionsService(),
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map,
      suppressMarkers: true,
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    }),
    markerC = new google.maps.Marker({
      position: pointC,
      title: "point C",
      label: "C",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
  // get route from B to C
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointB, pointC);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    avoidTolls: false,
    avoidHighways: false,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      responses.push(response);
      if (responses.length > 1) {
        for (var i = 0; i < (responses.length - 1); i++) {
          response.routes[0].bounds.union(responses[i].routes[0].bounds)
          for (var j = 0; j < responses[i].routes[0].legs.length; j++)
            response.routes[0].legs.push(responses[i].routes[0].legs[j]);
        }
        directionsDisplay.setDirections(response);
      }
    } else {
      console.error('Directions request failed due to ' + status);
    }
  });
}

initMap();

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map-canvas'></div>

＆＃13;

Google Maps API：显示多个方向，例如PointA - ＆gt; PointB - ＆gt; PointC

1 个答案: