时间戳

首页 > 解决方案 > 无效的字符串长度错误

javascript - 无效的字符串长度错误

问题描述

我的视图中有地图

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

在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 star = `
<img src="https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png">
`;
  const token = 'pk.eyJ1IjoibmVtZXNpc2VzIiwiYSI6ImNqaDlqaDQycTA1ZnEzY3BpbDZpNHk1c2EifQ.KbuJOIjYh6VrWYo48yxETg';

  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 stars = '';
for(let s = 0; i < 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">Reting: ' + json[i].rating + '</p>' + '</h3><p class="price-text-hotel" >Price ' + stars + '</p>'))
      .addTo(map);


  });
});
html,
body,
#map-canvas {
  height: 500px;
  margin: 0px;
  padding: 0px
}

#map-canvas {
  width: 800px;
}
<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' />

<div id="map-canvas"></div>

我试过这个例子，我有

无效的字符串长度错误

标签： javascriptjqueryhtmlcss

解决方案

看来您正在寻找：

star.repeat(json[i].rating)

那对你有用吗？

推荐阅读