Нажмите на карту маркеров

Question

У меня так, что нажатие на карту создает маркер в этой точке.Я пытаюсь добавить событие в маркеры, которые будут возвращать lnglat при нажатии на маркер.Проблема в том, что я не могу щелкнуть маркер, карта просто продолжает создавать новые маркеры.

map.on('click', function(e){
    let marker = new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map);
    marker.on('click', function(){
        console.log('hello');
    });
});

Answer 1

Маркеры являются простыми элементами HTML, поэтому вы можете добавить прослушиватель событий непосредственно к ним, вызвав addEventListener на их узле DOM:

map.on('click', function(e){
  var el = document.createElement('div');
  el.className = 'marker';
  el.style.height = '20px';
  el.style.width = '20px';
  el.style.backgroundColor = 'black';

  el.addEventListener('click', function(e){
    // Prevent the `map.on('click')` from being triggered
    e.stopPropagation();
    console.log('hello');
  });

  let marker = new mapboxgl.Marker(el).setLngLat(e.lngLat).addTo(map);
});

https://codepen.io/eddydg/pen/gZpbRj?editors=1010