Googleマップv3の複数のポリラインストロークカラーを変更する

Question

それぞれ独自の色を持つ複数のポリラインを作成する必要があり、それらのマーカーが互いに接続されています。私はGoogleマップv3を使用しています。

たとえば、5つのマーカーがあり、それらはすべて赤い色のポリラインで接続されています。今度は、この赤い色のポリラインを、複数のカラースキームで表示したい、最初はポリライン緑、2番目はブルー、3番目はブラックなどです。

はここ

<script type='text/javascript'> 
var poly; 
var map; 
var path; 
var i = parseInt(0, 10); 
var marker;   

function initialize() { 
    var chicago = new google.maps.LatLng(41.879535, -87.624333); 
    var myOptions = { 
    zoom: 7, 
    center: chicago, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
    var polyOptions = { 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
    } 
    poly = new google.maps.Polyline(polyOptions); 
    poly.setMap(map); 
    // Add a listener for the click event 
    google.maps.event.addListener(map, 'click', addLatLng); 
} 

/** 
* Handles click events on a map, and adds a new point to the Polyline. 
* @param {MouseEvent} mouseEvent 
*/ 
function addLatLng(event) { 
    i++; 
    //var path = poly.getPath(); 
    path = poly.getPath(); 
    var polyOptions2 = { 
    strokeColor: '#FFFFFF', 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
    } 
    if (i == 2) { 
    poly.setOptions(polyOptions2); 

    } 
    else { 
    polyOptions2.strokeColor = "#FF0000"; 
    poly.setOptions(polyOptions2); 
    } 
    path.push(event.latLng); 
    // Add a new marker at the new plotted point on the polyline. 
    marker = new google.maps.Marker({ 
    position: event.latLng, 
    title: '#' + path.getLength(), 
    map: map 
    }); 
} 
</script> 

Answer 1

は、マーカーやポリラインを作成し、それらを通してJSON配列とループにポリラインのためにあなたのマーカーのオプションと色をロードし、私のコードです。

これはあなたが行くことを望みます。

Answer 2

セット

 var colorVariable = ["red","green","blue","yellow","black"]; 

     for(var a =0;a<=5;a++){ 
       var polyOptions = { 
       strokeColor: colorVariable[a], 
       strokeOpacity: 1.0, 
       strokeWeight: 2 
       } 
       poly = new google.maps.Polyline(polyOptions); 
       poly.setMap(map); 
     } 

のようなループのためのあなたのコードのこの部分は、それが正常に動作します