Question

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

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

以下代码负责gmap中的路径

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

如何将其更改为Gradient？

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声明如下

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

你可以使用Geometry库中的interpolate方法（https://developers.google.com/maps/documentation/javascript/reference#spherical）沿着直线路径获取x位置（我假设你正在处理直线）。这将允许您构造x-1折线。然后，您可以在红橙色渐变中生成颜色（请参阅Generate colors between red and green for an input range）并将它们分配给每条x-1折线的strokeColor。

增加x以获得更微妙的渐变。

SVG中的渐变线用于Google地图路径

2 个答案: