Disegno polilinea multipla con colori diversi usando Google map api V3 ASP.net

Question

Sono in grado di disegnare più polilinee in google map e modellarle, ma voglio colorare ogni polilinea con un colore diverso.

Attualmente, ho questo codice:

var DrivePath = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892), 
    new google.maps.LatLng(12.97918167, 77.6449), 
    new google.maps.LatLng(12.97918667, 77.64487167), 
    new google.maps.LatLng(12.979185, 77.64479167), 
    new google.maps.LatLng(12.97918333, 77.64476) 
]; 


var PathStyle = new google.maps.Polyline({ 
    path: DrivePath, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

PathStyle.setMap(map); 

C'è un modo posso aggiungere uno stile separato per ogni polilinea che sto creando?

Answer 1

Certamente. Per esempio supponiamo di sapere che colori volete andare con ogni linea, supponiamo che quindi dispone di una vasta gamma di colori, che ha una lunghezza pari a DrivePath.length - 1.

var Colors = [ 
    "#FF0000", 
    "#00FF00", 
    "#0000FF", 
    "#FFFFFF", 
    "#000000", 
    "#FFFF00", 
    "#00FFFF", 
    "#FF00FF" 
]; 

Ora, invece di disegnare una polilinea , traccia una polilinea separata per ogni coordinata.

for (var i = 0; i < DrivePath.length-1; i++) { 
    var PathStyle = new google.maps.Polyline({ 
    path: [DrivePath[i], DrivePath[i+1]], 
    strokeColor: Colors[i], 
    strokeOpacity: 1.0, 
    strokeWeight: 2, 
    map: map 
    }); 
} 

Answer 2

Per disegnare 2 Polilinee diversi

function initialize() 
    { 

       map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 7, 
        center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA. 
        }); 

       var polyOptions = { 
        strokeColor: '#000000', 
        strokeOpacity: 1.0, 
        strokeWeight: 3 
       }; 
       var polyOptions2 = { 
        strokeColor: '#FFFFFF', 
        strokeOpacity: 1.0, 
        strokeWeight: 3 
       }; 

       var polyline = new google.maps.Polyline(polyOptions); 
       var polyline2= new google.maps.Polyline(polyOptions2); 
       polyline.setMap(map); 
       polyline2.setMap(map); 
       google.maps.event.addListener(map, 'click', addLatLng); 
    }