Android谷歌地图添加渐变折线遇问题：调用addSpan出现黑线

问题原因分析 #

你遇到的渐变折线显示为黑线的问题，主要有以下几个常见原因：

• 折线基础宽度不足：渐变效果需要足够的线宽才能渲染出来，默认线宽过细会导致渐变过渡无法被肉眼识别，看起来像黑线。
• 基础颜色与渐变Span冲突：如果折线基础颜色未设置为透明，会和渐变Span叠加，导致渐变效果被覆盖，显示出基础颜色（默认可能是黑色）。
• SDK版本兼容性：旧版本的Google Maps SDK可能存在渐变StrokeStyle的渲染bug。

解决方案 #

1. 设置足够的线宽并将基础颜色设为透明

修改你的代码，为PolylineOptions添加线宽和透明基础颜色，确保渐变Span能完全生效：

// 初始化折线配置
val lineOption = PolylineOptions()
    .addAll(yourPathPoints) // 替换为你的路线坐标列表
    .width(15f) // 设置足够的线宽，推荐10f以上
    .color(Color.TRANSPARENT) // 将基础颜色设为透明

// 添加渐变Span
lineOption.addSpan(
    StyleSpan(
        StrokeStyle.gradientBuilder(
            Color.RED,
            Color.YELLOW
        ).build()
    )
)

// 将折线添加到地图
map.addPolyline(lineOption)

2. 验证类导入正确性

确保你导入的是Google Maps SDK提供的类：

import com.google.android.gms.maps.model.PolylineOptions
import com.google.android.gms.maps.model.StyleSpan
import com.google.android.gms.maps.model.StrokeStyle

3. 升级Google Maps SDK版本

检查你的build.gradle（Module级别）中Maps SDK的依赖版本，升级到最新稳定版：

dependencies {
    implementation 'com.google.android.gms:play-services-maps:18.2.0' // 或更高稳定版本
}

额外说明 #

如果你的路线仅包含2个坐标点，渐变会直接从起点红色过渡到终点黄色，但仍需足够的线宽才能看到效果；如果路线包含多个点，渐变会沿路径长度均匀过渡。

内容的提问来源于stack exchange，提问作者Rubyna Thapa