梯度線SVG對谷歌地圖的路徑

Question

我在谷歌地圖解釋GPS定位數據，在這裏我想創建一個梯度用紅色開始，以橙色結束的路徑

this教程只直單色行路

下面的代碼是在GMAP

var flightPath = new google.maps.Polyline({ 
path: flightPlanCoordinates, 
geodesic: true, 
strokeColor: '#FF0000', 
strokeOpacity: 1.0, 
strokeWeight: 2 
}); 

負責路徑我怎樣才能改變這種以梯度？

Answer 1

與@JerryDuwall的答案的幫助下，我已經做到了這一點

中，當然這不是一個梯度，但有些不是單一的顏色線多麼誘人

$.each(flightPlanCoordinates,function(k,v){ 
    i++; 
    curLatLang = new google.maps.LatLng(v[0],v[1]); 
    if(prevLatLang == ""){ 
     prevLatLang = curLatLang; 
    }else{ 
     var strokeColor = makeGradientColor({r:0, g:255, b:204}, {r:255, g:0, b:0}, ((i/coordinatelog.length)*100)); 
     var flightPath = new google.maps.Polyline({ 
     path: [prevLatLang,curLatLang], 
     geodesic: true, 
     strokeColor: strokeColor.cssColor, 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 
     prevLatLang = curLatLang; 
     flightPath.setMap(map); 
    } 
}): 

而且makeGradientColor declartion如下

function makeGradientColor(color1, color2, percent) { 
    var newColor = {}; 
    function makeChannel(a, b) { 
     return(a + Math.round((b-a)*(percent/100))); 
    } 
    function makeColorPiece(num) { 
     num = Math.min(num, 255); // not more than 255 
     num = Math.max(num, 0);  // not less than 0 
     var str = num.toString(16); 
     if (str.length < 2) { 
      str = "0" + str; 
     } 
     return(str); 
    } 
    newColor.r = makeChannel(color1.r, color2.r); 
    newColor.g = makeChannel(color1.g, color2.g); 
    newColor.b = makeChannel(color1.b, color2.b); 
    newColor.cssColor = "#" + 
         makeColorPiece(newColor.r) + 
         makeColorPiece(newColor.g) + 
         makeColorPiece(newColor.b); 
    return(newColor); 
} 

Answer 2

您可以使用幾何庫（https://developers.google.com/maps/documentation/javascript/reference#spherical）內interpolate方法相處的直線路徑（我假設你正在處理的直線）x位置。這將允許你構造x-1多義線。然後，您可以在紅橙色漸變內生成顏色（請參閱Generate colors between red and green for an input range），並將它們分配給每個x-1多義線的strokeColor。

增加x以獲得更微妙的漸變。