使用谷歌地圖api繪製多個多段線不同顏色V3 ASP.net

Question

我可以在谷歌地圖中繪製多條折線並對它們進行設計，但是我想用不同的顏色爲每條折線着色。

目前，我有這樣的代碼：

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

有什麼辦法，我可以添加一個單獨的樣式給我創造每條線？

Answer 1

當然。例如假設你知道你想要去的每一行，讓我們假設因此，你有一個顏色數組，其具有等於DrivePath.length長度什麼顏色 - 1.

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

現在，而不是繪製一個折線，爲每個座標繪製一條單獨的折線。

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個不同的折線

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