在谷歌地图上收听键盘事件

Listen keyboard events on Google Map

本文关键字：键盘 事件 谷歌地图      更新时间：2023-09-26

我的应用程序上有谷歌地图，我使用地图在上面绘制多段线。我想在谷歌地图上听键盘事件，这样如果我在绘制多段线上按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);
            }
        }
    }

在这种情况下，当我点击地图时，事件被触发。但当我在地图上画画的时候就不行了。

  1. 通过将事件添加到映射自身

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

这永远不会被解雇。"

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

有什么帮助吗？感谢

您需要注册一个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演示

编辑：

我意识到，虽然这适用于矩形，但它似乎不适用于多边形，因为将绘图模式设置为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演示

相关文章：