更改 2 个航点之间的线条颜色

Question

我使用此函数通过 Waypoints 数组在 A 和 Z 之间绘制路线。 是否可以更改线条颜色（默认蓝色）但仅在某些航路点之间？

我的意思是我想要 A 和 B 之间的蓝色，C 和 D 之间的红色，...... 我找到了如何改变线条的颜色

var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: { strokeColor: "#8b0013" },

但我在航点中找不到如何操作...？

感谢您的帮助

function calcRoute(origin_lat,origin_lng,destination_lat,destination_lng) {
   console.log ("Entrée CALC ROUTE");

   var origin = new google.maps.LatLng(origin_lat,origin_lng);
   var destination = new google.maps.LatLng(destination_lat,destination_lng);
   var waypointsArray = document.getElementById('waypoints').value.split("|");

   var waypts = [];

   for (i = 0; i < waypointsArray.length; i++) { 
   if (waypointsArray[i]!="") {
        var waypoint = waypointsArray[i];
        var waypointArray = waypoint.split(",");
        var waypointLat = waypointArray[0]; 
        var waypointLng = waypointArray[1];
        console.log("waypts lat " + waypointLat);
        console.log("waypts lng " + waypointLng);

            waypts.push({
            location: new google.maps.LatLng(waypointLat,waypointLng),
            stopover: true
            }) 
        }
   }
   console.log("waypts " + waypts.length);

        var request = {
          origin:origin,
          destination:destination,
          travelMode: google.maps.TravelMode.DRIVING,
          waypoints: waypts,
          provideRouteAlternatives: true
        };
           console.log ("Calc request "+JSON.stringify(request));

        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
     });
    }   

Answer 1

您不能只修改DirectionsRenderer 输出的一个片段。您可以使用单独的 DirectionsRenderer 渲染每个路段，也可以创建自己的自定义渲染器，让您可以为路线的每个步骤创建单独的多段线并独立着色。

proof of concept fiddle with a custom renderer

代码 sn-p：

var map;
var directionsService;
var directionsDisplay;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    suppressPolylines: true
  });
  // Baltimore, MD, USA (39.2903848, -76.61218930000001)
  // Boston, MA, USA (42.3600825, -71.05888010000001)

  // Philadelphia, PA, USA (39.9525839, -75.16522150000003)
  // New York, NY, USA (40.7127837, -74.00594130000002)

  calcRoute(39.2903848, -76.6121893, 42.3600825, -71.05888);
}
google.maps.event.addDomListener(window, "load", initialize);

function calcRoute(origin_lat, origin_lng, destination_lat, destination_lng) {
  console.log("Entrée CALC ROUTE");

  var origin = new google.maps.LatLng(origin_lat, origin_lng);
  var destination = new google.maps.LatLng(destination_lat, destination_lng);
  var waypointsArray = document.getElementById('waypoints').value.split("|");

  var waypts = [];

  for (i = 0; i < waypointsArray.length; i++) {
    if (waypointsArray[i] != "") {
      var waypoint = waypointsArray[i];
      var waypointArray = waypoint.split(",");
      var waypointLat = waypointArray[0];
      var waypointLng = waypointArray[1];
      console.log("waypts lat " + waypointLat);
      console.log("waypts lng " + waypointLng);

      waypts.push({
        location: new google.maps.LatLng(waypointLat, waypointLng),
        stopover: true
      })
    }
  }
  console.log("waypts " + waypts.length);

  var request = {
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    waypoints: waypts,
    provideRouteAlternatives: true
  };
  console.log("Calc request " + JSON.stringify(request));

  directionsService.route(request, customDirectionsRenderer);
}

function customDirectionsRenderer(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      var polyline = new google.maps.Polyline({
        map: map,
        strokeColor: "blue",
        path: []
      })
      if (i == 1) {
        polyline.setOptions({
          strokeColor: "red"
        });
      }
      var steps = legs[i].steps;
      for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        for (k = 0; k < nextSegment.length; k++) {
          polyline.getPath().push(nextSegment[k]);
          bounds.extend(nextSegment[k]);
        }
      }
    }

    polyline.setMap(map);
    map.fitBounds(bounds);
  }
};

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="waypoints" value="39.9525839,-75.1652215|40.7127837,-74.0059413" />
<div id="map_canvas"></div>