javascript - 单击标记 map 框

Question

我有它，所以点击 map 会在那个点创建一个标记。我正在尝试向标记添加一个事件，该事件将在单击标记时返回 lnglat。问题是我无法单击标记， map 只是不断创建新标记。

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 元素，因此您可以通过在其 DOM 节点上调用 addEventListener 直接向它们添加事件监听器:

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