Как программно закрыть все всплывающие окна в mapbox gl?

Вот пример: https://jsfiddle.net/kmandov/eozdazdr/
Нажмите кнопку кнопки в правом верхнем углу, чтобы открыть/закрыть всплывающее окно.

Учитывая, что у вас есть всплывающее окно и маркер:

var popup = new mapboxgl.Popup({offset:[0, -30]})
    .setText('Construction on the Washington Monument began in 1848.');

new mapboxgl.Marker(el, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(popup)
    .addTo(map);

Вы можете закрыть всплывающее окно, вызвав:

popup.remove();

или вы можете открыть его, позвонив:

popup.addTo(map);

Как видно из источника маркера, togglePopup использует эти два внутренних метода:

togglePopup() {
    var popup = this._popup;

    if (!popup) return;
    else if (popup.isOpen()) popup.remove();
    else popup.addTo(this._map);
}

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

Mapbox позволяет прослушивать события на карте (и запускать их вручную). В документации это не упоминается, но вы можете использовать пользовательские события.

Учитывая, что у вас есть всплывающее окно:

// Create popup and add it to the map
const popup = new mapboxgl.Popup({ offset: 37, anchor: 'bottom' }).setDOMContent('<h5>Hello</h5>').setLngLat(feature.geometry.coordinates).addTo(map);

// Add a custom event listener to the map
map.on('closeAllPopups', () => {
  popup.remove();
});

Если вы хотите закрыть все всплывающие окна, запустите событие:

map.fire('closeAllPopups');

Mapbox автоматически использует класс .mapboxgl-popup для всплывающего окна. Вы также можете добавить дополнительные классы с помощью options.className.

Итак, если у вас есть jQuery, просто выполните:

$('.mapboxgl-popup').remove();

Или обычный javascript:

const popup = document.getElementsByClassName('mapboxgl-popup');
if ( popup.length ) {
    popup[0].remove();
}

Я почти уверен, что вы можете предположить, что открыто только одно всплывающее окно. Поведение по умолчанию, по-видимому, заключается в том, что если один из них открыт и щелкнут второй элемент, первое всплывающее окно полностью удаляется из DOM при открытии второго. Если ваше приложение каким-то образом допускает несколько открытых всплывающих окон, вам нужно будет пройти и удалить каждое из них с помощью простого js, а не использовать только первый элемент.

Я знаю, что это старый вопрос, но недавно я работал над Mapbox. Начиная с mapbox-gl v2.3, mapboxgl.Popup имеет свойство closeOnClick, где, если установлено значение true, всплывающее окно исчезает, когда вы щелкаете вне всплывающего окна.

let popup = new mapboxgl.Popup({
  anchor: "top",
  closeOnClick: true,
});

map.on(
  "click",
  "location",
  (e) => {
    map.getCanvas().style.cursor = "pointer";

    let coordinates = e.features[0].geometry.coordinates.slice();

    popup
      .setLngLat(coordinates)
      .setHTML("what I want to display")
      .addTo(map);
  }
);

Кроме того, вы можете показать всплывающее окно при входе мыши вместо щелчка и добавить событие mouseleave, чтобы удалить всплывающее окно:

  map.on(
  "mouseleave",
  "location",
  () => {
    map.getCanvas().style.cursor = "";
     popup.remove();
  }
);