用于Google地图路径的SVG中的渐变线 [英] Gradient line in SVG for Google map path

问题描述

我正在解释谷歌地图中的GPS位置数据，在这里我想要创建一个以红色开始并以橙色结尾的渐变路径

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

以下代码负责gmap中的路径

  var flightPath = new google.maps.Polyline {
 path：flightPlanCoordinates，
 geodesic：true，
 strokeColor：'＃FF0000'，
 strokeOpacity：1.0，
 strokeWeight：2 
}）; 
  

我该如何将其更改为Gradient？

解决方案

在@JerryDuwall的回答帮助下，我已经完成了这项工作。

当然，这不是一个渐变，而是一些如何比单色线更有吸引力

$ $ p $ $ code每个（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 声明如下

  function makeGradientColor（color1，color2，percent）{
 var newColor = {}; 
函数makeChannel（a，b）{
 return（a + Math.round（（b-a）*（percent / 100）））; 
} 
函数makeColorPiece（num）{
 num = Math.min（num，255）; //不超过255 
 num = Math.max（num，0）; //不小于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）; 
} 
  

I am interpreting GPS location data in google map, here i would like create a path with gradient which starts with red and ends with orange

this tutorial has only a straight single color line as path

following code is responsible for path in gmap

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

How can i change this to Gradient ?

解决方案

with help of @JerryDuwall 's answer i have done this

Of-course it is not a gradient but some how attractive than single color line

$.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);
    }
}): 

And makeGradientColor declartion follows

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

这篇关于用于Google地图路径的SVG中的渐变线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！