使用图标的角度谷歌地图上不同折线的不同颜色

问题描述

我有一个要求，即根据走线支腿的状态，我需要为折线使用不同的颜色，这些折线不是笔触而是图标。目前，我能够以1种颜色绘制多段线，如何以多种颜色绘制它们

到目前为止，这是我的图标代码

public linesymbol = {
    path: 'M 1,1,1',strokeOpacity: 1,strokeColor : "black",scale: 4,};

这是绘制折线的代码

private setMappolylines() {
    if (this.pathValue != undefined && this.pathValue != null) this.pathValue.setMap(null);
    
    let pathArray = [];
    this.paths.forEach((path) => {
        pathArray.push({ lat: path.o.latitude,lng: path.o.longitude });
        pathArray.push({ lat: path.d.latitude,lng: path.d.longitude });
        switch(path.legStatus){
            
            case LegStatus.STARTED:
                this.linesymbol.strokeColor = "black";
                
                break;
                case LegStatus.COMPLETED:
                this.linesymbol.strokeColor = "green";
            
                break;
                case LegStatus.NOTSTARTED:
                this.linesymbol.strokeColor = "gray";
                
                break;
        }
        console.log(this.linesymbol.strokeColor);
        this.pathValue = new google.maps.polyline({
            path: pathArray,geodesic: false,strokeOpacity: 0,icons: [
                {
                    icon: this.linesymbol,offset: '0',repeat: '20px',}
            ],});
        this.pathValue.setMap(this.map);
    });
}

此代码将所有内容绘制为绿色，即使数据具有某些已开始且应为黑色的路径， console.log（this.linesymbol.strokeColor）仍显示正确的颜色。 >

任何帮助将不胜感激

解决方法

这是因为您在this.lineSymbol.strokeColor的每次迭代中都覆盖paths。如果它们需要不同，则可以根据path进行定义：

private setMapPolylines() {
    if (this.pathValue != undefined && this.pathValue != null) this.pathValue.setMap(null);
    
    let pathArray = [];
    this.paths.forEach((path) => {
        pathArray.push({ lat: path.o.latitude,lng: path.o.longitude });
        pathArray.push({ lat: path.d.latitude,lng: path.d.longitude });
        let strokeColor = "black";
        switch(path.legStatus) {
            
            case LegStatus.COMPLETED:
                strokeColor = "green";
            
                break;
            case LegStatus.NOTSTARTED:
                strokeColor = "gray";
                
                break;
        }
        this.pathValue = new google.maps.Polyline({
            path: pathArray,geodesic: false,strokeOpacity: 0,icons: [
                {
                    icon: {
                        strokeColor,path: 'M 1,1,1',strokeOpacity: 1,scale: 4,},offset: '0',repeat: '20px',}
            ],});
        this.pathValue.setMap(this.map);
    });
}