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

除了像上面那样内联，您还可以执行以下操作。根据您的操作，此方法可能更有益：

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

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

此方法也自动创建点击事件而不需要用Jquery，通过在标记上使用"setPopup"它会自动显示弹出的HTML内容点击了。

Mapbox - 向图层添加弹出事件

Mapbox - Adding popup event to a layer

javascript

mapbox-gl-js