Nghe sự kiện bàn phím trên Google Map

Question

Tôi có Google Maps trên ứng dụng của mình và tôi sử dụng bản đồ để vẽ Polyline trên đó. Tôi muốn nghe các sự kiện bàn phím trên bản đồ Google để nói rằng nếu tôi nhấn phím Esc khi vẽ Polyline, nó sẽ dừng vẽ (nó nên đặt lại DrawingMode). Tôi đã thử cách này theo 2 cách. 1. Tôi đã thêm các keyevents vào vùng chứa của nó:

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

Trong trường hợp này, sự kiện được kích hoạt khi tôi đã nhấp vào bản đồ. Nhưng không phải khi tôi vẽ trên Bản đồ.

2. Bằng cách thêm sự kiện vào Map bản thân

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

này không bao giờ được fired.`

Và tôi không muốn nghe sự kiện chính trên cửa sổ hoặc toàn bộ tài liệu vì tôi cũng có các thành phần khác trong tài liệu

Bất kỳ trợ giúp nào? Cảm ơn

Answer 1

Bạn cần đăng ký trình xử lý sự kiện DOM addDomListener và gọi setDrawingMode(null) trên drawingManager.

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

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

    if (code === 27) { 

     drawingManager.setDrawingMode(null); 
    } 
}); 

Dưới đây là bản trình diễn làm việc. Hi vọng điêu nay co ich.

JSFiddle demo

Sửa:

Tôi nhận ra rằng trong khi làm việc này cho một hình chữ nhật, nó dường như không làm việc với đa giác vì thiết lập các chế độ vẽ null thực sự hoàn thành lớp phủ. Trong trường hợp này, bạn cần theo dõi lớp phủ của mình (trong sự kiện overlaycomplete) và gọi setMap(null) trên chính hình đa giác, ngoài phần trên.

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