Javascript 谷歌地图路径SVG中的梯度线

我在谷歌地图上解释GPS定位数据，这里我想创建一条渐变路径，以红色开始，以橙色结束

教程只有一条单色直线作为路径

下面的代码负责gmap中的路径

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

---

如何将其更改为渐变？

您可以使用几何体库（）中的

插值

方法获得沿直线路径的

x

位置（我假设您处理的是直线）。这将允许您构造

x-1

多段线。然后，您可以在红橙色渐变（请参阅）中生成颜色，并将其指定给

x-1

多段线的strokeColor

---

增加

x

以获得更微妙的梯度。

借助@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

declaration如下

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

函数makeGradientColor（颜色1、颜色2、百分比）{
var newColor={}；
功能生成通道（a、b）{
回报率（a+数学四舍五入（（b-a）*（百分比/100））；
}
函数makeColorPiece（num）{
num=Math.min（num，255）；//不超过255
num=Math.max（num，0）；//不小于0
var str=num.toString（16）；
如果（str.length<2）{
str=“0”+str；
}
返回（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）；
返回（新颜色）；
}

谢谢你的建议，它真的帮了我很大的忙