mapbox-gl-js - 如何在 mapbox-gl-js 的标记上添加 "click"监听器

Question

我使用以下示例在 map 上添加了一些标记:

https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/

现在我想在用户点击标记图像时显示弹出窗口，但我找不到优雅的解决方案。有什么帮助吗？

Answer 1

以下片段来自 Mapbox-gl-js 示例:Display a popup on click

 map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });

    if (!features.length) {
        return;
    }

    var feature = features[0];
    //Use Feature and put your code
    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
});

   // Use the same approach as above to indicate that the symbols are clickable
   // by changing the cursor style to 'pointer'.

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