您可以在“mouseup”上自动关闭 Leaflet EasyButton 吗？

Question

我希望用户能够打开一个状态改变的 EasyButton，在地图上选择一个区域（通过按住 shift 键并拖动鼠标），然后一旦释放鼠标，就可以轻松按钮自动关闭。现在，您打开easybutton，选择一个为您提供纬度/经度的区域作为边界框。效果很好。但是，当您单击以关闭 EasyButton 时，它会覆盖您的选择（将新坐标分配给您单击 EasyButton 所在的区域）。我的代码：

    var stateChangingButton = L.easyButton({
            states: [{
                    stateName: 'ButtonOff',      
                    icon:      'X',               
                    title:     'Turn Button On', 
                    onClick: function(btn, map) {    
                            btn.button.style.backgroundColor = 'red';
                            btn.state('ButtonOn');
                            map.on('mousedown', getClickLocation);
                            map.on('mouseup', getReleaseLocation);
                            map.on('mouseup', toGeoJsonBounds);
                            map.on('mouseup', addSelectionLayer);
                            map.on('mouseup', addColorSelection);                                
                    }
                }, {
                    stateName: 'ButtonOn',
                    icon:      'X',
                    title:     'Turn Button Off',
                    onClick: function(btn, map) {
                        btn.state('ButtonOff');
                            btn.state('ButtonOff');
                            btn.button.style.backgroundColor = 'white';
                            map.off('mousedown', getClickLocation);
                            map.off('mouseup', getReleaseLocation);
                            map.off('mouseup', toGeoJsonBounds);
                            map.off('mouseup', addSelectionLayer);
                            map.off('mouseup', addColorSelection);                             

                    }
                    }]
                });

                stateChangingButton.addTo(map);

我在绝望的尝试中尝试过，它给出了一个错误：

       //map.on('mouseup', btn.state('ButtonOff')); 

我尝试创建一个函数，它说 btn 未定义：

        function buttonAutoOff(){
            btn.state('ButtonOff');
         }

我是 JavaScript 和 Leaflet 的新手，我必须为我的工作做这件事。我要问的甚至可能吗？

谢谢！

Answer 1

你应该使用“boxzoomend”事件。

map.on('boxzoomend', function(){
  stateChangingButton.state('ButtonOff');
  stateChangingButton.button.style.backgroundColor = 'white';
}); 

jsfiddle 示例：https://jsfiddle.net/andrea689/y0xpmpm0/