Question

在我的Javascript Mapbox GL应用程序中，我很难使Map.off正常工作，因此很难关闭事件处理程序。

我有几个在地图上创建的对象（圆）实例（通过mapbox gl提供），每个实例都分配了多个事件处理程序，类似于以下示例： https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

区别在于我有多个实例。它们每个都可以在屏幕上拖动并放置。问题是，当用户需要在地图上执行其他功能时，他们无法关闭与所述点相对应的所有事件处理程序。

尽管map.off在“ onUp”中运行，但在底部“ else”部分中没有任何作用。

下面是我的代码的问题片段。按钮导致调用MoveTree和stillTree。

//---MOVE TREES CONTENT---//

//Move all Trees 
function moveTree(){
    var currName;
    for (var i = 1; i <= trees.length; i++){               
        currName = "circle" + i;
        selectCheck(currName, true);
    }   
}

//Turn off all tree interaction 
function stillTree(){
    for (var i = 1; i <= trees.length; i++){
            currName = "circle" + i;
            selectCheck(currName, false);
        }
}

//Perform or restrict tree moving functionality
function selectCheck(currName, move){    
    if (move == true){
        map.on('mouseenter', currName, onEnter) 
        function onEnter(){
            map.setPaintProperty(currName, 'circle-color', '#3bb2d0');
            canvas.style.cursor = 'move';
        }

        map.on('mouseleave', currName, onLeave)
        function onLeave(){
            map.setPaintProperty(currName, 'circle-color', 'black');
            canvas.style.cursor = '';
        };

        map.on('mousedown', currName, onDown)
        function onDown(e){
            e.preventDefault();
            canvas.style.cursor = 'grab';
            map.on('mousemove', onMove);
            map.once('mouseup', onUp);  
        }

        function onUp(){                          
            map.off('mousemove', onMove);
            map.off('touchmove', onMove);               
        }

        function onMove(){
            map.getSource(currName).setData(geojson);
        }            
    }
    else{
        alert(move);
        map.off('mousemove');
        map.off('mouseenter');
        map.off('mousemove');
        map.off('touchmove');         
    }
}

Answer 1

根据https://docs.mapbox.com/mapbox-gl-js/api/#map#off，必须为map.off()提供两个参数：

type(string)：以前用于安装侦听器的事件类型。
listener(Function)：以前安装为侦听器的功能。

因此，“其他”部分应该是这样的：

else {
  alert(move);
  map.off('mousemove', onMove);
  map.off('mouseenter', onEnter);
  map.off('touchmove', onMove);         
}

MapBox GL：“ Map.Off”问题

1 个答案: