Показать рейтинг звезд в всплывающем окне - PullRequest
Новая
       8

Показать рейтинг звезд в всплывающем окне

0 голосов
/ 24 мая 2018

У меня есть карта в моем представлении

Во всплывающих окнах для маркера я показываю информацию

В json [i] .rating у меня есть число от 1 до 5, и теперь я показываю его.Но мне нужно показать рейтинг звезды, например, это

Так что если у меня, например, 2 в рейтинге, мне нужно иметь две звезды.

Как я могу сделать это правильно?

Вот рабочий фрагмент того, что у меня сейчас

 


$(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());
      $.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
            })
            .setHTML('<h3 class="hotel_name">' + json[i].name + '</h3><p class="adress-text-hotel">' + json[i].address1 + '</p>' + '</h3><p class="rating-title">Reting: ' + json[i].rating + '</p>' + '</h3><p class="price-text-hotel" >Price ' + json[i].sales_price + '</p>'))
          .addTo(map);


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

1 Ответ

0 голосов
/ 24 мая 2018

Пожалуйста, найдите ниже решение вашей проблемы.Вы найдете изменения прямо под моими комментариями.

Я присваиваю вашу звездную графику константе с именем 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);


  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...