Как закрыть всплывающее окно, когда маркерный слой закрыт при нажатии, используя Mapbox GL JS - PullRequest
Новая
       16

Как закрыть всплывающее окно, когда маркерный слой закрыт при нажатии, используя Mapbox GL JS

0 голосов
/ 02 апреля 2019

У меня проблемы с закрытием / удалением всплывающих окон, когда слои маркеров закрываются при нажатии. Я пытался использовать popup.remove в функции onclick, но мне не очень повезло связать функцию с кнопками, используемыми для отображения и скрытия слоев маркера. Любая помощь в закрытии всплывающих окон, когда слои маркеров закрыты или скрыты, была бы очень признательна.

JS: 

    // add popup to layer
    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ["high_camp"] // Add layers
        });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        var popup = new mapboxgl.Popup({
            offset: {
                'top': [0, 0],
                'top-left': [0, 0],
                'top-right': [0, 0],
                'bottom': [0, -40],
                'bottom-left': [0, -40],
                'bottom-right': [0, -40],
                'left': [18, -22],
                'right': [-18, -22],
            }
        })
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.NAME)
        // Change attribute, properties.'Replace' (Uppercase)
        .addTo(map);
    });

    // Toggle high camp layer
    var togglehighcampId = ["high_camp"]; // Add layer

    document.getElementById("highcampIcon").onclick = function (e) { 
        // Change button name, getElementById('Replace')
        for (var index in togglehighcampId) {
            var clickedLayer = togglehighcampId[index];
            e.preventDefault();
            e.stopPropagation();

            var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

            if (visibility === 'none') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                this.className = '';
            } else {
                this.className = 'on';
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            }
        }

    };

1 Ответ

0 голосов
/ 11 апреля 2019

Может быть, вы можете сохранить свое всплывающее окно в глобальной области, чтобы получить к нему доступ через метод onclick

Примерно так: 


    var popup;

    // add popup to layer
    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ["high_camp"] // Add layers
        });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        popup = new mapboxgl.Popup({
            offset: {
                'top': [0, 0],
                'top-left': [0, 0],
                'top-right': [0, 0],
                'bottom': [0, -40],
                'bottom-left': [0, -40],
                'bottom-right': [0, -40],
                'left': [18, -22],
                'right': [-18, -22],
            }
        })
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.NAME)
        // Change attribute, properties.'Replace' (Uppercase)
        .addTo(map);
    });

    // Toggle high camp layer
    var togglehighcampId = ["high_camp"]; // Add layer

    document.getElementById("highcampIcon").onclick = function (e) { 
        // Change button name, getElementById('Replace')
        for (var index in togglehighcampId) {
            var clickedLayer = togglehighcampId[index];
            e.preventDefault();
            e.stopPropagation();

            var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

            if (visibility === 'none') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                this.className = '';
            } else {
                this.className = 'on';
                popup.remove(); // REMOVE THE POPUP WHEN THE LAYER IS REMOVED
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            }
        }

    };

PS: код не проверен

...