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

Я использовал Mapbox JS API для отображения координат. Это ссылка на документ: 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.
}

Существует метод off — docs.mapbox.com/mapbox-gl-js/api/#map#off — который «удаляет прослушиватель событий, ранее добавленный с помощью Map#on».

— 08.05.2019 14:43

javascript mapbox

08.05.2019 01:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

393

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

1. Измените html на равный ""

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

Установите для обоих элементов непрозрачность 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

08.05.2019 02:23

Ответ принят как подходящий

Я решил проблему, установив флаг 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';
}

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

08.05.2019 20:38