在Google地图上收听键盘事件

Question

我的应用程序上有谷歌地图,我使用地图绘制折线.我想在谷歌地图上听键盘事件,以便说如果我在绘制折线时按下Esc键,它应该停止绘图(它应该重置DrawingMode).我试过两种方式.1.我在其容器中添加了关键事件:

 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);
            }
        }
    }

在这种情况下,当我点击地图时会触发事件.但是当我在地图上画画时.

2. 通过向Map本身添加事件

   google.maps.event.addListener(me.map, 'keydown', function () { alert('in keydown'); });

这永远不会被解雇

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

有帮助吗？谢谢

Answer 1

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

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