javascript - ESRI API 中的toolbar.deactivate() 出现问题

Question

我正在尝试创建一个按钮，单击该按钮将激活esri.toolbars.Draw.EXTENT，然后再次单击时将停用工具栏并恢复正常 map 导航。

我所做的在第一次点击时有效，但在第二次点击时似乎没有停用工具栏。

一切似乎都正常除了 toolbar.deactivate() 似乎没有触发。

function initToolbar(map) {
            var currentvalue = document.getElementById('searchByExtent').value;
            var toolbar = new esri.toolbars.Draw(map);
            if (currentvalue == "Off"){
                document.getElementById("searchByExtent").value="On";
                toolbar.activate(esri.toolbars.Draw.EXTENT);
                dojo.connect(toolbar, "onDrawEnd", selectStuff);
                //toolbar.deactivate();
            } else {
                document.getElementById("searchByExtent").value="Off";
                toolbar.deactivate();
            }
        }

<input type    = "button"
       id      = "searchByExtent"
       value   = "Off"
       onclick = "initToolbar(map);">
       Search by Extent
     </input>

Answer 1

您遇到了 Javascript 范围问题。

当您激活工具栏时，一切都会正常工作:

var toolbar = new esri.toolbars.Draw(map);
...
toolbar.activate(esri.toolbars.Draw.EXTENT);

...并且您在名为 toolbar 的变量中有一个事件工具栏...但该变量是 initToolbar 函数的本地变量。该函数退出，变量就会丢失。当您尝试停用工具栏时，您会再次调用 initToolbar:

var toolbar = new esri.toolbars.Draw(map); // This is NOT the same toolbar!
...
toolbar.deactivate(); // Makes no sense, it's not active.

相反，在函数外部定义toolbar，以便维护引用:

var toolbar = null; // define it here

function initToolbar(map) {
        var currentvalue = document.getElementById('searchByExtent').value;
        if (currentvalue == "Off"){
            toolbar = new esri.toolbars.Draw(map); // Create the toolbar here

            document.getElementById("searchByExtent").value="On";
            toolbar.activate(esri.toolbars.Draw.EXTENT);
            dojo.connect(toolbar, "onDrawEnd", selectStuff);
        } else if (toolbar) { // If your value is not "Off" and the toolbar exists, then we can kill it.
            document.getElementById("searchByExtent").value="Off";
            toolbar.deactivate();
        }
    }