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

我在mapbox中有一个自定义行，当您单击它时会显示一个弹出窗口，如何使它仅在您将其悬停时显示？我从“点击”改为“鼠标输入”，但它没有关闭弹出窗口。什么需要改变

下面是一个JSFIDLE示例：

JS

mapboxgl.accessToken='pk.eyj1ijoibwfya2v0aw5nynviiwiysi6imnryywzmk3yjaxzjgyem1wy2zmc3f4y2eifq.gMF eccaahgwiuorcnfkg'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[-0.066985,51.503363]，
缩放：9
});
map.on（'load'，function（））{
map.addSource（'routeThree'{
'type'：'geojson'，
“数据”：{
“类型”：“特征”，
“属性”：{}，
“几何学”：{
'type'：'LineString'，
“坐标”：[
[-0.066985, 51.503363],
[-3.550610, 40.390555 ],
[-77.140217, 38.801481],
[-118.175979, 34.008447]
]
}
}
});
map.addLayer({
“id”：“路由树”，
“类型”：“行”，
“源”：“路由树”，
“布局”：{
“直线连接”：“圆形”，
“线帽”：“圆形”
},
“油漆”：{
“线条颜色”：“04A5BD”，
“线宽”：8
}
});
映射（'click'、'routeThree'，函数（e）{
新建mapboxgl.Popup（）
.setLngLat（e.lngLat）
.setHTML（“这是解释某事的第三行”）
.addTo（地图）；
});
});

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

mapboxgl.accessToken='pk.eyj1ijoibwfya2v0aw5nynviiwiysi6imnryywzmk3yjaxzjgyem1wy2zmc3f4y2eifq.gMF eccaahgwiuorcnfkg'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[-0.066985,51.503363]，
缩放：9
});
map.on（'load'，function（）{
var弹出窗口；
map.addSource（'routeThree'{
'type'：'geojson'，
“数据”：{
“类型”：“特征”，
“属性”：{}，
“几何学”：{
'type'：'LineString'，
“坐标”：[
[-0.066985, 51.503363],
[-3.550610, 40.390555],
[-77.140217, 38.801481],
[-118.175979, 34.008447]
]
}
}
});
map.addLayer({
“id”：“routeThree2”，
“类型”：“行”，
“源”：“路由树”，
“布局”：{
“直线连接”：“圆形”，
“线帽”：“圆形”
},
“油漆”：{
“线条颜色”：“04A5BD”，
“线宽”：8
}
});
map.on（'mouseover'，'routeThree2'，函数（e）{
popup=new mapboxgl.popup（）
.setLngLat（e.lngLat）
.setHTML（“这是解释某事的第三行”）
.addTo（地图）；
});
映射（'mouseout'，'routeThree2'，函数（e）{
if（popup）popup.remove（）；
});
});

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

mapboxgl.accessToken='pk.eyj1ijoibwfya2v0aw5nynviiwiysi6imnryywzmk3yjaxzjgyem1wy2zmc3f4y2eifq.gMF eccaahgwiuorcnfkg'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[-0.066985,51.503363]，
缩放：9
});
map.on（'load'，function（）{
var弹出窗口；
map.addSource（'routeThree'{
'type'：'geojson'，
“数据”：{
“类型”：“特征”，
“属性”：{}，
“几何学”：{
'type'：'LineString'，
“坐标”：[
[-0.066985, 51.503363],
[-3.550610, 40.390555],
[-77.140217, 38.801481],
[-118.175979, 34.008447]
]
}
}
});
map.addLayer({
“id”：“routeThree2”，
“类型”：“行”，
“源”：“路由树”，
“布局”：{
“直线连接”：“圆形”，
“线帽”：“圆形”
},
“油漆”：{
“线条颜色”：“04A5BD”，
“线宽”：8
}
});
map.on（'mouseover'，'routeThree2'，函数（e）{
popup=new mapboxgl.popup（）
.setLngLat（e.lngLat）
.setHTML（“这是解释某事的第三行”）
.addTo（地图）；
});
映射（'mouseout'，'routeThree2'，函数（e）{
if（popup）popup.remove（）；
});
});

我希望它处于悬停状态，而不是单击状态，如果我将其从单击更改为鼠标，则在悬停状态下显示，但弹出窗口永远不会消失，这是因为您的代码没有包含鼠标输出。。。在我的回答中，我很高兴能提供帮助，我在地图盒上挣扎了很多。我编辑并添加了一个小提琴完全工作我希望它是悬停，而不是点击，如果我改变它从点击鼠标后，它确实显示在悬停，但弹出窗口永远不会消失，这是因为你的代码没有包括鼠标出。。。在我的回答中，我很乐意帮忙，但我也为之奋斗了很多

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);
         
         });
     
   
    });

    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();

        });


    });