Как прекратить функцию map.on () для Mapbox?

Question

Я использовал API Mapbox JS для отображения координат. Это ссылка на документ: https://docs.mapbox.com/mapbox-gl-js/example/mouse-position/

У меня есть две кнопки. После того, как я щелкну первый, когда мышь наводит на карту, она показывает координаты.

Что я хочу сделать, так это то, что после нажатия второй кнопки предыдущая функция запуска может прекратиться. Можете ли вы помочь мне в этом?

function showCor() {
        map.on('mousemove', function (e) {
            document.getElementById('coord-info-lat').innerHTML =
                JSON.stringify(e.lngLat.lat.toFixed(5));

            document.getElementById('coord-info-lng').innerHTML =
                JSON.stringify(e.lngLat.lng.toFixed(5));
        });

}

function notShowCor() {
// Please help me here.
}

Answer 1

Я решил проблему, установив флаг isActive. Вот мой код

let isActive = true;

//function to show the position
function showCor() {
    isActive = true;
    map.on('mousemove', function (e) {
        if (isActive) {
            document.getElementById('coord-info-lat').innerHTML =   
                JSON.stringify(e.lngLat.lat.toFixed(5));
            document.getElementById('coord-info-lng').innerHTML =
                JSON.stringify(e.lngLat.lng.toFixed(5));
        }

    });

}

//function to clear the info and terminate the function.
function notShowCor() {
    isActive = false;
    document.getElementById('coord-info-lat').innerHTML = 'N/A';
    document.getElementById('coord-info-lng').innerHTML = 'N/A';
}

Пожалуйста, сообщите, если у вас есть лучшие решения. Спасибо.

Answer 2

Сразу могу вспомнить 2 варианта, которые могут вам помочь;

1. Измените HTML на ""

function notShowCor() {
 map.on('mousemove', function (e) {
            document.getElementById('coord-info-lat').innerHTML = "";
            document.getElementById('coord-info-lng').innerHTML = "";
        });
}

2. Установите для обоих элементов непрозрачность 0 (хотя технически он все еще будет работать) Предполагая, что у вас были стили CSS следующим образом:

#coord-info-lat, #coord-info-lng {
   opacity:0;
}
#coord-info-lat.shown, coord-info-lng.shown {
   opacity: 1;
}

function showCor() {
        map.on('mousemove', function (e) {
            var lat = document.getElementById('coord-info-lat');
            var lng = document.getElementById('coord-info-lng');
            lat.innerHTML = JSON.stringify(e.lngLat.lat.toFixed(5));
            lng.innerHTML = JSON.stringify(e.lngLat.lng.toFixed(5));

            lat.className = "shown";
            lng.className = "shown";
        });
}

function notShowCor() { 
        document.getElementById('coord-info-lat').className = "";
        document.getElementById('coord-info-lng').className = "";
}

Вы также можете сделать комбинацию из 2