Иконка Листовка Карта javascript

Question

У меня есть некоторые проблемы с моим кодом ... Я делаю карту с иконками маркеров, которые я помещаю с помощью getJSON. Нет проблем для этого, проблема в том, что у меня есть разные иконки, и я создаю функцию для сборки и установкиих:

class Carte {
  constructor(divMap) {
    this.map = L.map(divMap).setView([-27.4710107, 153.0234489], 15);
    this.APImap = L.tileLayer(
      "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
        maxZoom: 18,
        id: "mapbox.streets",
        //ma clé d'accées mapbox
        accessToken: "pk.eyJ1IjoicmFmYTE4NyIsImEiOiJjazBlejByNTUwazBqM290aTR6ZTl1NHZsIn0.uen14wB6LPlL_450lJOynA"
      }
    ).addTo(this.map);
    this.rouge = L.icon({
      iconUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259986-velorouge.png",
      shadowUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259993-shadow.png",
      iconSize: [40, 50],
      iconAnchor: [0, 50],
      popupAnchor: [21, -45],
      shadowSize: [50, 35],
      shadowAnchor: [0, 35]
    });
    this.vert = L.icon({
      iconUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259988-velovert.png",
      shadowUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259993-shadow.png",
      iconSize: [40, 50],
      iconAnchor: [0, 50],
      popupAnchor: [21, -45],
      shadowSize: [50, 35],
      shadowAnchor: [0, 35]
    });
    this.orange = L.icon({
      iconUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259983-veloorange.png",
      shadowUrl: "https://image.noelshack.com/fichiers/2019/39/1/1569259993-shadow.png",
      iconSize: [40, 50],
      iconAnchor: [0, 50],
      popupAnchor: [21, -45],
      shadowSize: [50, 35],
      shadowAnchor: [0, 35]
    });
  }

  getJSON() {
    $.getJSON(
      "https://api.jcdecaux.com/vls/v1/stations?contract=brisbane&apiKey=afa1c4a53ff162ae3d6f6941a45c8caf14b5a4b7",
      station => {
        for (let i = 0; i < station.length; i++) {
          this.logoMarker(station[i].available_bikes, station[i].status);
          this.posMarker(station[i].position.lat, station[i].position.lng);
          this.popup(
            this.posMarker(station[i].position.lat, station[i].position.lng),
            station[i].status,
            station[i].address,
            station[i].available_bikes,
            station[i].available_bike_stands
          );
        }
      }
    );
  }

  logoMarker(nVelos, statut) {
    let choixMarker;
    // construction icon rouge si station fermée
    if (statut === "CLOSED") {
      choixMarker = this.rouge

      // construction icon orange si il ya moins de 3 vélos
    } else if (nVelos <= 3) {
      choixMarker = this.orange
    }
    // construction icon vert pour le reste
    else {
      choixMarker = this.vert
    }
    return choixMarker;
  }

  posMarker(lat, lng) {
    let marker = L.marker([lat, lng], {
      icon: this.logoMarker()
    }).addTo(
      this.map
    );
    // display none du formulaire si ouvert au clic sur marquer
    $(".fermeture").click(() => {
      $("#formInfo").css("display", "none");
    });
    $(marker).click(() => {
      $("#formInfo").css("display", "none");
    });
    return marker;
  }

  popup(marker, statut, address, nVelos, nPlaces) {
    if (statut === "OPEN") {
      //popup avec nom et velos dispo dans la station cliqué
      marker.bindPopup(
        $(
          `<p>Station &#10140; <span>${address}</span><br>Velos disponibles &#10140; <span>${nVelos}</span><br><br><button id="inscri">Reservation</button></p>`
        ).click(() => {
          // gestion du boutton reservation
          if (statut === "OPEN" && nVelos > 0) {
            //ouverture form et ajout des donnes
            $("#formInfo").css("display", "block");
            $(".nomStation").text(address);
            $(".status").text(statut);
            $(".velosDispo").text(nVelos);
            $(".placesDispo").text(nPlaces);
          }
        })[0]
      );
      // replacement du boutton reservation par message "pas de velo"
      if (statut === "OPEN" && nVelos === 0) {
        marker.bindPopup(
          $(
            `<p>Station &#10140; <span>${address}</span><br>Velos disponibles &#10140; <span>${nVelos}</span><br><br><span style='color: red'>PAS DE VELOS DISPONIBLES</span></p>`
          )[0]
        );
      }
      // replacement du boutton par message "station fermée"
    } else {
      marker.bindPopup(
        $(
          `<p>Station &#10140; <span>${address}</span><br>Velos disponibles &#10140; <span>${nVelos}</span><br><br><span style='color: red'>STATION FERMÉE</span></p>`
        )[0]
      );
    }
  }
}

const carte = new Carte("map");
carte.getJSON();

#map{
height: 400px;
}

<link href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='map'></div>

отредактируйте код, чтобы сделать его более понятным.

Эта проблема по-прежнему возникает, только последняя иконка появляется для вашей помощи

Answer 1

Вы должны заранее создать свои маркеры в глобальной области видимости (вне вашей функции)

var veloRougeMarker = new LeafIcon({
    iconUrl: "./img/veloRouge.png"
  });
var veloOrangeMarker = new LeafIcon({
    iconUrl: "./img/veloOrange.png"
  });
var veloVertMarker = new LeafIcon({
    iconUrl: "./img/veloVert.png"
  });

И, по вашему выбору, вы назначите свой choixMarker одним из 3 маркеров

if (statut === "CLOSED") {
  choixMarker = veloRougeMarker;
}

ДЛЯ СОЗДАНИЯ ВАШИХ МАРКЕРОВ (в функции getJSON) ...

      var marker = this.posMarker(station[i].position.lat, station[i].position.lng);
      marker.setIcon(this.logoMarker(station[i].available_bikes, station[i].status));
      this.popup(
        marker,
        station[i].status,
        station[i].address,
        station[i].available_bikes,
        station[i].available_bike_stands
      );