如何在Mapbox标记弹窗中显示对应数量的星级评分图片？

嘿，这事儿不难！我们只需要根据评分数字生成对应数量的星星图片标签，替换掉原来直接显示数字的部分就行。下面是具体的实现步骤和修改后的代码：

核心思路 #

1. 写一个辅助函数，接收评分数字（1-5），生成对应数量的星星图片HTML代码
2. 在弹窗的HTML生成逻辑里，用这个函数的返回值替换原来的json[i].rating数字

修改后的完整代码 #

JavaScript部分 #

$(function() {
  const json = [
    {
      "name": "Park Hotel",
      "address1": "327 Cranbrook Road",
      "rating": 2,
      "lng": 0.065,
      "lat": 51.568,
      "pictures": [
        { "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390", "description": "Exterior" },
        { "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390", "description": "Lobby" },
        { "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390", "description": "Lobby" },
        { "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391", "description": "Lobby" },
        { "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391", "description": "Guest Room" }
      ],
      "sales_price": 2847
    }
  ];
  const token = '.....';
  mapboxgl.accessToken = token;
  let map = new mapboxgl.Map({
    container: 'map-canvas',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0.065, 51.568],
    zoom: 3
  });
  map.addControl(new mapboxgl.NavigationControl());

  // 新增：生成星星评分的辅助函数
  function generateStarRating(rating) {
    let starsHtml = '';
    const starUrl = 'https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png';
    // 根据评分数字循环生成对应数量的星星图片
    for (let i = 0; i < rating; i++) {
      starsHtml += `<img src="${starUrl}" alt="Star" class="rating-star" />`;
    }
    return starsHtml;
  }

  $.each(json, function(i, item) {
    let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);
    let marker = new mapboxgl.Marker()
      .setLngLat(myLatlng)
      .setPopup(new mapboxgl.Popup({ offset: 25 })
        // 修改这里：用generateStarRating替换直接显示数字
        .setHTML(`<h3 class="hotel_name">${json[i].name}</h3>
                  <p class="adress-text-hotel">${json[i].address1}</p>
                  <p class="rating-title">Rating: ${generateStarRating(json[i].rating)}</p>
                  <p class="price-text-hotel">Price ${json[i].sales_price}</p>`))
      .addTo(map);
  });
});

HTML部分（新增星星样式） #

在<style>标签里加上星星的样式，让它们排列更美观：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title></title>
  <style>
    html, body, #map-canvas { height: 500px; margin: 0px; padding: 0px }
    #map-canvas { width: 800px; }
    /* 新增：星星图片的样式 */
    .rating-star {
      width: 16px;
      height: 16px;
      margin-right: 2px;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div id="map-canvas"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
</html>

关键细节说明 #

• generateStarRating函数：接收评分数字，通过循环生成对应数量的<img>标签，每个标签使用你提供的星星图片地址
• 样式部分：给星星图片设置了宽高、间距和垂直对齐，避免星星排版混乱
• 弹窗HTML里的模板字符串：用ES6模板字符串替换了原来的字符串拼接，代码可读性更好（当然你如果习惯原来的写法也可以改回去，核心是调用generateStarRating函数）

这样修改后，当评分为2时，弹窗里就会显示2颗星星，完美替换原来的数字啦！

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