Papa Parse读取Google Sheets CSV配置Leaflet图标不生效问题求助

云原生阿岚

2026-10-1

问题原因

核心原因是从CSV读取的icon字段字符串存在肉眼不可识别的特殊字符：大概率是首尾空格、换行符、制表符，或是Google Sheets导出时带入的零宽空格、非打印 Unicode 字符。控制台打印时这类字符不会被渲染出来，所以看起来和硬编码的"info-circle"完全一致，但实际字符串内容不匹配，导致Font Awesome无法识别对应的图标名。
小概率是PapaParse解析时为字符串自动添加了多余的转义字符，导致传入AwesomeMarkers的参数不符合预期。

解决方法

优先对icon字段做字符串清洗，去除空白和特殊字符，修改配置代码即可：
原来的配置代码：

let icon = L.AwesomeMarkers.icon({
  icon: data[row].icon,
  markerColor: data[row].color,
  prefix: "fa"
});

修改为：

let icon = L.AwesomeMarkers.icon({
  // 先去除首尾空白，再清除零宽空格等常见不可见特殊字符
  icon: data[row].icon.trim().replace(/[\u200B-\u200D\uFEFF]/g, ''),
  markerColor: data[row].color,
  prefix: "fa"
});

如果清洗后仍不生效，可以加一行调试代码确认异常字符的类型：

// 输出原始值和清洗后的值的长度，长度不一致即可确认存在多余字符
console.log('原始值长度：', data[row].icon.length, '清洗后长度：', data[row].icon.trim().replace(/[\u200B-\u200D\uFEFF]/g, '').length);
// 输出每个字符的Unicode编码，排查特殊字符
console.log('原始值字符编码：', [...data[row].icon].map(c => c.charCodeAt(0).toString(16)));