Question

我使用mapbox-gl-js API，并且在我的地图上有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

除了像上面那样内联之外，您还可以执行以下操作。取决于您正在执行的此方法可能会更有益：

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内容。

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

2 个答案: