Mapbox добавляет только последний маркер?

Question

Я работаю с mapbox и размещаю несколько маркеров на карте. Мой код выглядит так:

add.locations.forEach((location) => {
    console.log(location.long + " " + location.lat);
    // add marker to map
    let marker = new mapboxgl.Marker(el)
        .setLngLat([location.long, location.lat])
        .setPopup(popup)
        .addTo(this.map);

    this.markers.push(marker);
});

Когда я смотрю в консоль, виден console.log(location.long + " " + location.lat); с двумя разными long и lat. Но на карте есть только последнее местоположение / указатель !?

Что здесь может быть не так?

Answer 1

Похоже, что вы используете один и тот же контейнер el для всех ваших маркеров, поэтому после каждого цикла новый маркер будет перезаписывать предыдущий (и, таким образом, останется только последний).

Вы должны создать контейнер для каждого из ваших маркеров:

add.locations.forEach((location) => {

  // create a HTML element for each feature
  const el = document.createElement('div');

  // make a marker for each feature and add to the map
  const marker = new mapboxgl.Marker(el)
    .setLngLat([location.long, location.lat])
    .setPopup(popup)
    .addTo(this.map);

  this.markers.push(marker);
});

https://www.mapbox.com/help/custom-markers-gl-js/#add-markers-to-the-map