Mapbox-将弹出事件添加到图层

Question

我使用mapbox-gl-js API，在我的地图上有2个id: 'A'和id: 'B'图层。

map.addLayer({
    id: 'A',
    type: 'symbol',
...../*My code*/
});
map.addLayer({
    id: 'B',
    type: 'symbol',
...../*My code*/
});

当我单击id: 'B'图层时，我想添加一个弹出窗口

我怎样才能做到这一点？

Answer 1

就像是

map.on('click', 'B', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML("POPUP!")
        .addTo(map);
});

Answer 2

除了上面的Inline之外，您还可以执行以下操作。 根据您正在执行的方法，可能会更有利：

var popup = new mapboxgl.Popup()
  .setHTML('</br>Property Marker 1');

var marker = new mapboxgl.Marker()
  .setLngLat([-79.367196, 44.2197703])
  .addTo(map)
  .setPopup(popup);

此方法还自动创建click事件，而无需使用Jquery进行操作，通过在标记上使用“ setPopup”，它将在单击时自动显示弹出窗口的HTML内容。