将鼠标悬停在地图框中的路线上时无法显示弹出窗口

Question

我在 mapbox 中有一条自定义线，当您单击它时会显示一个弹出窗口，我怎样才能使它仅在您悬停时显示？我从“click”更改为“mouseenter”，但它没有关闭弹出窗口。需要改变什么？

这是一个 jsfiddle 示例：https://jsfiddle.net/andrre/jb4czmew/4/

JS

mapboxgl.accessToken = 'pk.eyJ1IjoibWFya2V0aW5nYnNvIiwiYSI6ImNrYnYwZmk3YjAxZjgyem1wY2Zmc3F4Y2EifQ.gMF-eCCaAHHgWIUoRcnfkg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center:  [-0.066985, 51.503363],
        zoom: 9
    });

map.on('load', function() {
        map.addSource('routeThree', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [-0.066985, 51.503363],
                        [-3.550610, 40.390555 ],
                        [-77.140217, 38.801481],
                        [-118.175979, 34.008447]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'routeThree',
            'type': 'line',
            'source': 'routeThree',
            'layout': {
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': '#04A5BD',
                'line-width': 8
            }
        });
   map.on('click', 'routeThree', function(e) {
            new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML("<h2>This is the third line that will explain something</h2>")
            .addTo(map);
         
         });
     
   
    });

Answer 1

您的代码是正确的，但是其中有一个小错误，您为 Source 和 Layer 选择了相同的 id...只需在 map.addLayer 和 click 事件中以不同的方式调用它，它就可以工作fiddle

    mapboxgl.accessToken = 'pk.eyJ1IjoibWFya2V0aW5nYnNvIiwiYSI6ImNrYnYwZmk3YjAxZjgyem1wY2Zmc3F4Y2EifQ.gMF-eCCaAHHgWIUoRcnfkg';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-0.066985, 51.503363],
        zoom: 9
    });

    map.on('load', function () {
        var popup;
        map.addSource('routeThree', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [-0.066985, 51.503363],
                        [-3.550610, 40.390555],
                        [-77.140217, 38.801481],
                        [-118.175979, 34.008447]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'routeThree2',
            'type': 'line',
            'source': 'routeThree',
            'layout': {
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': '#04A5BD',
                'line-width': 8
            }
        });
        map.on('mouseover', 'routeThree2', function (e) {
            popup = new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML("<h2>This is the third line that will explain something</h2>")
                .addTo(map);

        });

        map.on('mouseout', 'routeThree2', function (e) {
            if (popup) popup.remove();

        });


    });