google-map-react 如何根据速度为路径各分段设置不同描边颜色

可以实现。谷歌地图原生的Polyline实例不支持单条路径的不同分段设置不同描边色，你只需要将整条路径按坐标点拆分为多段独立的Polyline，为每一段单独配置颜色即可。

实现步骤 #

前提：你的places数组中的每个点位已经包含对应时刻的行驶速度字段（如event.speed），可基于该值计算每段路径的颜色。

1. 自定义速度与描边色的映射规则，可按需调整速度区间和对应色值：

const getStrokeColor = (speed) => {
  if (speed < 30) return '#FF0033' // 低速：红色
  if (speed < 60) return '#FFCC00' // 中速：黄色
  return '#00B32C' // 高速：绿色
}

2. 批量生成分段路径，替换原有单条Polyline的生成逻辑：

// 点位不足2个时无完整路径，跳过绘制
if (places && places.length >= 2) {
  // 存储所有分段实例，方便后续批量操作
  const pathSegments = []
  // 遍历所有点位，两两组成一段独立路径
  for (let i = 0; i < places.length - 1; i++) {
    const current = places[i]
    const next = places[i + 1]
    // 可选用当前点速度、或两点平均速度计算颜色
    const color = getStrokeColor(current.speed)
    const segment = new maps.Polyline({
      path: [
        { lat: current.position.lat, lng: current.position.lng },
        { lat: next.position.lat, lng: next.position.lng }
      ],
      geodesic: true,
      strokeColor: color,
      strokeOpacity: 1,
      strokeWeight: 4
    })
    segment.setMap(map)
    pathSegments.push(segment)
  }
}

注意事项 #

• 原生strokeOpacity的取值范围为0-1，你原有代码中写的2属于无效值，会被默认重置为1
• 如果轨迹点位数量极多（超过1000个点），可先对点位做抽稀处理，减少Polyline实例数量避免性能损耗
• 如果需要后续批量操作路径（如隐藏、删除），直接遍历存储所有分段实例的pathSegments数组，统一调用setMap(null)即可清除所有路径

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