如何使用多色折线绘制谷歌地图航路点

Question

您好，我尝试在谷歌地图上绘制带有方向航路点的折线。

我尝试过类似的方法。 My draw 我想像这样画出不同颜色的路线。

Google maps directions example ss

我写了这个示例代码。

 function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [
          {
            location: '41.062317, 28.899756',
            stopover: true
          },
          {
            location: '41.062276, 28.898866',
            stopover: true
          },
          {
            location: '41.061993, 28.8982',
            stopover: true
          }
        ];
    directionsService.route({
      origin: {lat: 41.063328, lng:28.901215},
      destination:{lat: 41.060756, lng:28.900046},
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setOptions({
          directions :response,
        })
        drawpolylines(directionsDisplay.getMap())
        var route = response.routes[0];

      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });

  }

  function drawpolylines(map) {
     var flightPlanCoordinates = [
      {lat: 41.062317, lng: 28.899756},
      {lat: 41.062276, lng: 28.898866},
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }

Answer 1

您需要为每个彩色线段创建单独的折线。下面的示例使用来自此相关问题的 renderDirectionsPolylines 的修改版本：Google Maps click event on route（修改为使用颜色数组，将每种颜色应用于数字路径中的步骤）。

proof of concept fiddle

代码 sn-p：

var map;
var infowindow = new google.maps.InfoWindow();

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressPolylines: true,
    infoWindow: infowindow
  });
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [{
    location: '41.062317, 28.899756',
    stopover: true
  }, {
    location: '41.062276, 28.898866',
    stopover: true
  }, {
    location: '41.061993, 28.8982',
    stopover: true
  }];
  directionsService.route({
    origin: {
      lat: 41.063328,
      lng: 28.901215
    },
    destination: {
      lat: 41.060756,
      lng: 28.900046
    },
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setOptions({
        directions: response,
      })
      var route = response.routes[0];
      renderDirectionsPolylines(response, map);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

}

google.maps.event.addDomListener(window, "load", initMap);

var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
var polylines = [];

function renderDirectionsPolylines(response) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      stepPolyline.setOptions({
        strokeColor: colors[i]
      })
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }
  map.fitBounds(bounds);
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>