Gradient линии в SVG для отображения пути Google

Question

Я интерпретируя данные о местоположении GPS в карте Google, здесь я хотел бы создать контур с градиентом, который начинается с красным и заканчивается с оранжевым

this учебник имеет только прямой один цвет линия, как путь

следующий код отвечает за путь в GMAP

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

Как я могу изменить это Градиент?

Answer 1

с помощью ответа @JerryDuwall «s я сделал это

Of-конечно, это не градиент, но некоторые, как привлекательный, чем одного цвета линии

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

Вы можете использовать метод interpolate в библиотеке Geometry (https://developers.google.com/maps/documentation/javascript/reference#spherical), чтобы получить x позиции вдоль пути прямой линии (я предполагаю, что вы имеете дело с прямыми линиями). Это позволит вам построить полилинии x-1. Затем вы можете генерировать цвета в красно-оранжевом градиенте (см. Generate colors between red and green for an input range) и назначить их штриху цвета каждого из ваших x-1 полилиний.

Увеличить x чтобы получить более тонкий градиент.