GoogleマップAPIを使用して、異なる色の複数のポリラインを描画するV3 ASP.net

Question

Googleマップで複数のポリラインを描画してスタイルを設定できますが、各ポリラインを異なる色で色付けしたいと思います。

現在、私はこのコードを持っている：

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

確かに。代わりに1つのポリラインを描画する今1

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

、 - あなたは、各行に行きたい何色を知っていると仮定たとえば、あなたがそれゆえDrivePath.lengthに等しい長さを持っている色の配列を持っていると仮定しましょう各座標に対して別々のポリラインを描画します。

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