单击

Question

有人知道在mapboxgl中单击时如何展开标记弹出窗口/信息框吗？

此刻，我有以下内容。当用户将鼠标悬停在标记上时，将显示一个弹出窗口，显示场所的名称。

var infobox = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
            })

map.on('mousemove', function(e) {
   var features = map.queryRenderedFeatures(e.point, {
                layers: [‘layer’]
            });
         
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        infobox.remove();
        return;
     }

    var feature = features[0];
            infobox.setLngLat(feature.geometry.coordinates)
                .setHTML(‘Venue name’)
                .addTo(map);
});

除此以外，我需要实现的是：当用户单击标记时，弹出窗口将展开，并显示场所名称，描述。弹出窗口保持打开状态，直到用户单击地图上的其他位置为止。 有谁知道如何在香草JS中做到这一点？

Answer 1

你的意思是这样吗？

// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';

// create the popup
var popup = new mapboxgl.Popup({ offset: 25 })
.setText('Venue name');

new mapboxgl.Marker(el)
.setLngLat(monument)
.setPopup(popup) // sets a popup on this marker
.addTo(map);

https://docs.mapbox.com/mapbox-gl-js/example/set-popup/