javascript - 在谷歌地图上监听键盘事件

Question

我的应用程序中有 Google map ，我使用 map 在其上绘制折线。我想在谷歌地图上听键盘事件，这样说如果我在绘制 Polyline 时按下 Esc 键，它应该停止绘制(它应该重置 DrawingMode)。 我通过两种方式尝试了这个。 1. 我将 keyevents 添加到它的容器中:

 bindKeyEventsForMapButtons : function(btn){
        var me = this;
        btn.el.dom.onkeydown = function (e) {
            if(btn.getId() == 'drawPerimeterGoogleMap'){
                if(btn.pressed==true)
                    btn.toggle(false);
            }else if(btn.getId() == 'removeAllPerimeter'){
                    btn.setPressed(false);
            }
        }
    }

在这种情况下，当我点击 map 时事件被触发。但是当我在 Map 上绘图时不是。

1. 通过给 map 本身添加事件

   google.maps.event.addListener(me.map, 'keydown', function () { alert('在按键中'); });

这永远不会被解雇。`

而且我不想在窗口或整个文档上监听关键事件，因为我在文档中也有其他组件

有什么帮助吗？谢谢

Answer 1

您需要注册一个 DOM 事件监听器 addDomListener 并在 drawingManager 上调用 setDrawingMode(null)。

google.maps.event.addDomListener(document, 'keyup', function (e) {

    var code = (e.keyCode ? e.keyCode : e.which);

    if (code === 27) {

        drawingManager.setDrawingMode(null);
    }
});

下面是一个工作演示。希望这会有所帮助。

JSFiddle demo

编辑:

我意识到虽然这适用于矩形，但它似乎不适用于多边形，因为将绘图模式设置为 null 实际上会完成叠加。在这种情况下，除了上述操作之外，您还需要跟踪叠加层(在 overlaycomplete 事件中)并在多边形本身上调用 setMap(null)。

var polygon;

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {

    polygon = e.overlay;    
});

google.maps.event.addDomListener(document, 'keyup', function (e) {

    var code = (e.keyCode ? e.keyCode : e.which);

    if (code === 27) {

        drawingManager.setDrawingMode(null);
        polygon.setMap(null);
    }
});

JSFiddle demo