路径规划场景中绘制颜色渐变的路径，颜色不生效问题如何解决

import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

// 地图折线点的坐标数组
const markers: Array<mapCommon.LatLng> =
  [{ longitude: 121.47, latitude: 31.23 }, { longitude: 121.43, latitude: 31.18 },
    { longitude: 121.46, latitude: 31.13 }, { longitude: 121.43, latitude: 31.05 },
    { longitude: 121.34, latitude: 31.02 }];

@Entry
@Component
struct HwMapDrawPage {
  private mapOption?: mapCommon.MapOptions; // 地图参数
  private mapController?: map.MapComponentController; // 地图组件控制器
  private callback?: AsyncCallback<map.MapComponentController>; // 地图初始化回调

  aboutToAppear(): void {
    this.mapOption = {
      position: {
        target: {
          longitude: 121.47, latitude: 31.23 // 地图中心坐标
        },
        zoom: 11, // 屏幕中心的缩放级别
      }
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
      }
    };
  }

  build() {
    Column() {
      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
        .width('100%')
        .height('80%')
      Column() {
        Button('划线').onClick(async () => {
          // 绘制颜色渐变折线
          // polyline初始化参数
          let polylineOption: mapCommon.MapPolylineOptions = {
            points: markers, // 折线点坐标的数组
            clickable: true, // 折线可点击
            startCap: mapCommon.CapStyle.BUTT, // 折线起始顶点的样式
            endCap: mapCommon.CapStyle.BUTT, // 折线结束顶点的样式
            geodesic: false, // 折线线段是否为大地曲线
            jointType: mapCommon.JointType.BEVEL, // 折线的线条拐角样式
            visible: true,
            width: 10,
            zIndex: 10,
            gradient: true, // 颜色过渡开启
            colors: [0xffffff00, 0xff000000, 0xffCCCCCC, 0xffCF0983, 0xffee0000] // 过渡段颜色数组对应markers数组
            /**
             colors:[0xffffff00,0xff000000] // 过渡段颜色数组数量少于折线点数量，后半段颜色无渐变效果
             */
          };
          // 创建polyline
          await this.mapController?.addPolyline(polylineOption);
        })
        Button('marker').onClick(async () => {
          // 绘制多个坐标点的标记
          for (let i = 0; i < markers.length; i++) {
            // Marker初始化参数
            let markerOptions: mapCommon.MarkerOptions = {
              position: {
                latitude: markers[i].latitude,  // 标记点坐标
                longitude: markers[i].longitude
              },
              rotation: 0, // 标记点旋转角度
              visible: true,
              zIndex: 0,
              alpha: 0.9, // 标记点透明度
              anchorU: 0.5, // 锚点水平坐标
              anchorV: 1, // 锚点垂直坐标
              clickable: true, // 是否可点击
              draggable: true, // 是否可拖拽
              flat: false // 是否平贴地图
            };
            await this.mapController?.addMarker(markerOptions);
          }
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}