2012-01-24 90 views
5

我需要創建多條折線,每條折線都有自己的顏色,它們的標記相互連接,我使用google map v3。更改谷歌地圖上的多重摺線描邊顏色v3

例如,我有五個標記,它們都通過紅色多段線相互連接。現在我想在多種配色方案中顯示此紅色折線,第一個折線爲綠色,第二個爲藍色,第三個爲黑色,依此類推。

這裏是我的代碼

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

回答

2

裝入標記選項和顏色的折線成JSON數組和循環通過他們創建標記和折線。

希望這會讓你走。

1

集for循環像

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

代碼的這一部分它會正常工作