Question

我想在悬停时显示关于标记的弹出窗口（而不是单击）。我查看了Mapbox上的所有示例（https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/） -

然而，示例中的问题是它从脚本中的图层中提取位置和描述...我希望它从我的数据集层显示数据['mydata']

以下代码适用于点击标记 - 我只是希望它能够悬停。

{{1}}

Answer 1

您将要在“ mousemove”上使用，而不是在“ click”上使用。初始化地图后，插入此代码。这是一个Mapbox图块，因此您的访问令牌应该可以使用。

// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
    closeButton: false
});

map.on('load', function() {
    // Add the source to query. In this example we're using
    // county polygons uploaded as vector tiles
    map.addSource('counties', {
        "type": "vector",
        "url": "mapbox://mapbox.82pkq93d"
    });

    map.addLayer({
        "id": "counties",
        "type": "fill",
        "source": "counties",
        "source-layer": "original",
        "paint": {
            "fill-outline-color": "rgba(0,0,0,0.1)",
            "fill-color": "rgba(0,0,0,0.1)"
        }
    }, 'place-city-sm'); // Place polygon under these labels.

    map.on('mousemove', 'counties', function(e) {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';

        // Single out the first found feature.
        var feature = e.features[0];

        // Display a popup with the name of the county
        popup.setLngLat(e.lngLat)
            .setText(feature.properties.COUNTY)
            .addTo(map);
    });

    map.on('mouseleave', 'counties', function() {
        map.getCanvas().style.cursor = '';
        popup.remove();
    });
});

在悬停时显示弹出窗口 - mapbox

1 个答案: