Question

我在我的视图中有地图

在标记的弹出窗口中，我显示信息

在json [i]。中我有1到5的数字，现在我显示它。但我需要显示评分星形图像，例如此

因此，如果我的评分为2，我需要有两颗星。

我如何正确地做到这一点？

这是我现在拥有的工作片段

＆＃13;

<!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;
      }
    </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>

＆＃13;

dt.Rows(0)("name").ToString()

＆＃13;

Answer 1

请在下面找到解决问题的方法。您可以在我的评论中找到更改。

我将您的星形图形指定给名为star的常量。然后使用for循环将该图形json[i].rating次附加到stars变量。 stars变量现在将替换json[i].rating方法中的setHTML。

希望这有帮助。

$(function() {
  const json = <%= @hotel_info.to_json.html_safe %>;
  // Your stat images here
  const star = `
    <img src="https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png">
`;

  const token = '*********';
  let centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng, gon.destination_city.lat);
  mapboxgl.accessToken = token;

  let map = new mapboxgl.Map({
    container: 'map-canvas',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: centerLatlng,
    zoom: 9
  });

  map.addControl(new mapboxgl.NavigationControl());
  $.each(json, function(i, item) {
    let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);

    // Your stars being generated
    let stars = '';
    for(let s = 0; s < json[i].rating; s++) {
        stars += star;
    }

    let marker = new mapboxgl.Marker()
      .setLngLat(myLatlng)
      .setPopup(new mapboxgl.Popup({
          offset: 25
        })
        .setHTML('<h3 class="hotel_name">' + json[i].name + '</h3><p class="adress-text-hotel">' + json[i].address1 + '</p>' + '</h3><p class="rating-title"><%= _("Rating") %>: ' + stars + '</p>' + '</h3><p class="price-text-hotel" ><%= _("Price") %>:  ' + json[i].sales_price + '</p>'))
      .addTo(map);


  });
});

在弹出窗口中显示评级星标

1 个答案: