Google harita kullanarak farklı renkle çoklu çizgi çizme api V3 ASP.net

Question

Google haritaya birden fazla çizgi çizebilir ve onları stilleyebilirim, ancak her bir çizgiyi farklı bir renkle boyamak istiyorum.

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

Ben oluşturma her polyline için ayrı bir stil eklemek herhangi bir yolu var mı:

Şu anda, bu kod var?

Answer 1

Kesinlikle. yerine çoklu çizgisi çizim, Şimdi 1.

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

- Mesela sen Diyelim ki bu nedenle DrivePath.length eşit bir uzunluğa sahiptir renklerin bir dizi var varsayalım, her satırı ile gitmek istiyorum hangi renkleri biliyor varsayalım , her bir koordinat için ayrı bir çizgi çizin.

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

2 farklı Polylines

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