Невозможно отобразить всплывающее окно при наведении курсора на маршрут в Mapbox - PullRequest
Новая
       28

Невозможно отобразить всплывающее окно при наведении курсора на маршрут в Mapbox

0 голосов
/ 10 июля 2020

У меня есть настраиваемая линия в mapbox, которая отображает всплывающее окно, когда вы щелкаете по нему, как я могу сделать так, чтобы она отображалась только при наведении курсора? Я изменил "щелчок" на "центр мыши", но всплывающее окно не закрылось. Что нужно изменить?

Вот пример 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);
         
         });
     
   
    });

1 Ответ

1 голос
/ 10 июля 2020

Ваш код правильный, но в нем есть небольшая ошибка, вы выбрали один и тот же идентификатор для источника и для слоя ... просто назовите его по-разному в map.addLayer и щелкните событие, и он работает скрипка 

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

        });


    });
...