Azure Maps如何禁用键盘快捷键？

Question

这真的让我苦恼了很久，直到我意识到当绘图管理器在编辑模式下选择一个特征/形状(在我的例子中是一个‘点’)时，按下delete或backspace键盘按钮，它实际上会删除它。我不能允许这种情况发生，否则每次我在编辑文本标签时按下退格键，它就会删除它！

​

​

正如你将在上图中看到的，我设计了一个自定义编辑控件表单，一旦选择了一个特征/形状(在我的例子中是一个'Point')，用户就可以编辑标题文本输入，标题将动态更新。但一旦他们按下键盘上的退格键，地图就会认为我想删除它。

我需要能够禁用快捷键删除，如果我想删除功能，然后我会选择删除按钮，而不是(按钮与bin图标) grrr这是如此恼人，找不到任何在MS文档中，解释如何禁用这个键盘快捷键？

https://docs.microsoft.com/en-us/azure/azure-maps/drawing-tools-interactions-keyboard-shortcuts#keyboard-shortcuts

Answer 1

是的，所以我想出了一个小技巧，虽然不是很理想，但效果很好！

我添加了一些函数，一个用于mouseover事件，另一个用于mouseout。将这些事件添加到文本输入中，然后相应地触发，即，如果用户要修改输入字段中的文本，则mouseover事件是活动的，因此我们可以将绘图管理器置于“空闲”状态。将图形管理器置于空闲状态可停止使用不需要的键盘快捷键。

最后，一旦鼠标光标离开文本输入，我们就可以将绘图管理器恢复到编辑模式。

文本输入的HTML代码(标题:输入，如我原始问题的屏幕截图所示)：

<div class=mb-2 mt-2">
    <label for="textLabelTitleInput" class="form-label-xs">Title</label>
    <input autocomplete="off" spellcheck="false" class="form-control form-control-xs" placeholder="Enter Name" id="textLabelTitleInput" oninput="updateTextLabelDesign()" onmouseover="textInputOnMouseOver()" onmouseout="textInputOnMouseOut()" />
</div>

JavaScript代码：

function textInputOnMouseOver() {
    updateDrawingMode('idle'); // See function 'updateDrawingMode'
}

function textInputOnMouseOut() {
    updateDrawingMode('edit-geometry'); // See function 'updateDrawingMode'
}

// Function called from above functions in the drawing control toolbar.
function updateDrawingMode(mode) {
    drawingManager.setOptions({
        mode: mode
    });
}

对于那些不熟悉绘图管理器选项的人，请参阅此处的MS文档以了解更完整的图片：https://docs.microsoft.com/en-us/azure/azure-maps/set-drawing-options