Mapbox地图标记弹窗星级图片显示及Invalid string length error解决

我来帮你搞定这个Mapbox弹窗里的星级替换问题，顺便解决那个烦人的Invalid string length错误～

先说说错误的大概率原因 #

你遇到的这个错误，十有八九是这两个坑导致的：

1. 循环变量和数组索引重名：比如你遍历json用的变量是i，生成星星的循环变量也用了i，这会导致循环次数读取到错误的rating值（甚至变成NaN），极端情况会触发无限循环拼接字符串，直接撑爆字符串长度限制。
2. 未处理无效的评分值：如果json[i].rating是null、undefined、非数字字符串，或者超出1-5的范围，会导致循环逻辑异常，要么生成大量无效的星星，要么直接报错。

正确的实现代码 #

下面是经过边界处理、避免变量冲突的完整实现，你可以直接套用：

// 假设你正在遍历json数组，这里用item代替json[i]，避免和循环变量冲突
json.forEach((item, index) => {
  // 1. 先处理评分，确保是1-5之间的有效数字
  const rawRating = parseInt(item.rating);
  // 兜底处理：如果是无效值，默认显示0颗星（或者你改成1颗也可以）
  const validRating = isNaN(rawRating) ? 0 : Math.max(1, Math.min(5, rawRating));

  // 2. 生成星级HTML（这里分两种：只显示实星，或者实星+空星补满5颗）
  // 方案一：只显示对应数量的实星
  let starsHtml = '';
  for (let i = 0; i < validRating; i++) {
    starsHtml += '<img src="star.png" alt="filled star" class="star-icon">';
  }

  // 方案二：补满5颗，不足的显示空星（可选，更美观）
  // let starsHtml = '';
  // for (let i = 0; i < 5; i++) {
  //   const starSrc = i < validRating ? 'star.png' : 'star-empty.png';
  //   starsHtml += `<img src="${starSrc}" alt="${i < validRating ? 'filled' : 'empty'} star" class="star-icon">`;
  // }

  // 3. 创建Mapbox弹窗并插入星级内容
  new mapboxgl.Popup()
    .setLngLat(item.coordinates) // 假设你的json里有坐标字段
    .setHTML(`
      <div class="popup-container">
        <h4>${item.name}</h4>
        <div class="rating-stars">${starsHtml}</div>
        <p>${item.description}</p>
      </div>
    `)
    .addTo(map);
});

额外优化建议 #

1. 给星星加样式：可以加一点CSS让星星对齐更美观：

.star-icon {
  width: 18px;
  height: 18px;
  margin: 0 1px;
  vertical-align: middle;
}
.rating-stars {
  margin: 8px 0;
}

2. 简化循环写法：如果不想用for循环，也可以用Array.from一行生成星级HTML：

const starsHtml = Array.from({ length: validRating }, () => 
  '<img src="star.png" alt="filled star" class="star-icon">'
).join('');

关键注意点 #

• 绝对不要让遍历数组的索引变量（比如i）和生成星星的循环变量重名，这是最容易踩的坑！
• 一定要对rating做类型转换和边界校验，避免无效值导致的逻辑异常。

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