Rysowanie wielu polilinii przy użyciu różnych kolorów przy użyciu api mapy Google V3 ASP.net

Question

Jestem w stanie narysować wiele polilinii w mapie google i nadać im styl, ale chcę pokolorować każdą polilinię innym kolorem.

Obecnie mam ten kod:

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

Czy jest jakiś sposób mogę dodać osobny styl do każdej polilinii że tworzę?

Answer 1

Oczywiście. Na przykład załóżmy, wiesz jakie kolory chcesz iść z każdej linii, załóżmy, że w związku z tym mieć tablicę kolorów, która ma długość równą DrivePath.length - 1.

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

Teraz, zamiast rysowania jedną polilinię , narysuj osobną polilinię dla każdej współrzędnej.

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

Na rysunku 2 różne polilinii

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