改变2个航点之间的线的颜色 [英] Change the color of the line between 2 waypoints

问题描述

我使用此函数通过Waypoints数组在A和Z之间绘制我的路线。
是否可以更改线条颜色（默认为蓝色），但只能在特定的路标之间进行更改？

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

  var directionsDisplay = new google.maps.DirectionsRenderer（{polylineOptions：{strokeColor：＃8b0013}，
  

但是我找不到如何在航点上做... ...

感谢您的帮助

 函数calcRoute（origin_lat，origin_lng，destination_lat，destination_lng）{
 console .log（EntréeCALC 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.sp点亮（ ）; 
 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 = {
来源：原产地，
目的地：目的地，
 travelMode：google.maps.TravelMode.DRIVING，
航点：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）; 
} 
}）; 
 
  

解决方案

DirectionsRenderer 的单个输出段。您可以使用单独的 DirectionsRenderer 来渲染每个线段，或者创建您自己的自定义渲染器，使您可以为每个线路步骤创建单独的多段线并为每个线段单独着色。

使用自定义渲染器的概念证明

代码段：
$ b

  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}）; （39.2903848，-76.61218930000001）//美国马萨诸塞州波士顿（42.3600825，-71.05888010000001）//美国宾夕法尼亚州费城（39.9525839，-75.16522150000003）//纽约，纽约州，美国（40.7127837， -74.00594130000002）calcRoute（39.2903848，-76.6121893,42.3600825，-71.05888）;} google.maps.event.addDomListener（window，load，initialize）;函数calcRoute（origin_lat，origin_lng，destination_lat，destination_lng）{console.log EntréeCALC 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  

<，c $ c> html，body，＃map_canvas {height： 100％;宽度：100％; margin：0px; < script src =https：//

I use this function to draw my route between A and Z via the Waypoints array. Is it possible to change the line color (default blue) but just between certain waypoints ?

I mean i want blue between A and B, red between C and D, .... I found how to change the color of the line

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

but i can't find how to do it in waypoints...?

thanks for your help

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

解决方案

You can't modify just a single segment of the output of the DirectionsRenderer. You can either render each segment with a separate DirectionsRenderer or create your own custom renderer that allows you to create individual polylines for each step of the route and color each one independently.

proof of concept fiddle with a custom renderer

code snippet:

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>

这篇关于改变2个航点之间的线的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！