Question

我使用了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.
}

Answer 1

我立即想到两种可能对您有所帮助的选择；

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组合在一起

Answer 2

我通过设置'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';
}

请告知您是否有更好的解决方案。谢谢。

如何终止Mapbox的map.on（）函数？

2 个答案: