我在地图框中有一个自定义行,当您单击它时会显示一个弹出窗口,我怎样才能使其仅在您将鼠标悬停时才显示?我从“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);
});
});
你的代码是正确的,但是有一个小错误,你为源和图层选择了相同的id...只需在map.addLayer和单击事件中以不同的方式调用它,它就可以工作fiddle
mapboxgl.accessToken = 'PASTE HERE YOUR TOKEN';
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();
});
});