在 Mapbox 中单击时获取标记的 ID

Question

我有一个 angular 视图，其中我从 api 的某些点获取数据，我使用一种方法根据 api 给出的坐标放置标记我。除了坐标之外，数据还有一个 ID。当我单击标记时，除了向我显示信息以某种方式获取 ID 并将其保存在变量中以便能够执行具有该特定点的功能外，我还需要它。到目前为止我有这个。

map: Mapboxgl.Map; // THE MAP
marker: Mapboxgl.Marker; // THE MARKER
// THE METHOD TO CREATE THE MARKERS ON THE MAP
creteGeoJSON(data) {
        data.forEach((element) => {
            const el: HTMLElement = document.createElement('div');
            el.className = 'marker';
            el.style.backgroundImage = 'url(../../../../assets/img/icon.png)';
            el.style.width = '30px';
            el.style.height = '30px';
            el.style.cursor = 'pointer';
            el.style.backgroundSize = 'cover';
            this.marker = new Mapboxgl.Marker(el)
              .setLngLat(
                element.coor
                  .split(',')
                  .reverse()
                  .map((x) => +x)
              )
              .setPopup(
                new Mapboxgl.Popup({ offset: 25 }) // add popups
                  .setHTML(
                    `<h2>ID: ${element.id} </h2>`
                  )
              )
              .addTo(this.map);
            this.currentMarkers.push(this.marker);
        });
 }

// THE FUNCTION TO GET THE LAT AND LONG
getCoords(e) {
    this.map.getCanvas().style.cursor = 'pointer';
    this.map.on('click', (e) => {
      const lat = e.lngLat.lat;
      const lng = e.lngLat.lng;
      // GET SOME ID 
    });
}

Answer 1

如果您想在用户点击标记时执行某些操作，您应该将点击事件添加到标记，而不是地图。

一个标记包含一个 HTML 元素，所以你可以这样做：

marker = new Mapboxgl.Marker(el)
//...
.addTo(map);

el.addEventListener('click', () => {
  // in here you have access to the `element` object that contains your data
});

在 Mapbox 中单击时获取标记的 ID

Get the ID of a marker on click in Mapbox

javascript

mapbox

mapbox-gl-js