Как нарисовать путевую точку google maps с разноцветными полилиниями

Question

Привет Я пытаюсь рисовать полилинии с помощью путевых точек на картах Google.

Я пробовал что-то в этом роде. 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

фрагмент кода:

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"></script> 
 
<div id="map"></div>