Điều hướng phím mũi tên trên Google Maps mà không cần nhấp vào Bản đồ

Question

Tôi đã thử tìm kiếm trên tài liệu API Google Maps và cũng ở đây nhưng tôi không thể tìm hiểu cách thực hiện việc này.

Tôi đang cố gắng đặt điều hướng phím mũi tên theo mặc định trên Bản đồ của tôi, mà không cần nhấp vào khu vực Bản đồ để bật điều đó.

Tôi đã thử các giải pháp sau đây mà không thành công:

map.getDiv().focus(); 
document.getElementById("map_canvas").focus(); 
google.maps.event.trigger(map, 'rightclick'); 

Bất cứ ai cũng có một đầu mối làm thế nào mà có thể được thực hiện?

Cảm ơn tất cả.

Answer 1

Một vài điều cần lưu ý ở đây, chỉ cần sử dụng .focus() hoặc kích hoạt hành động nhấp chuột trên phần tử div #map sẽ không thực hiện lừa bởi vì những hành động đó diễn ra trước khi bản đồ thực sự được hiển thị trên DOM. Vì vậy, điều đầu tiên để thừa nhận là sử dụng sự kiện tilesloaded thư viện bản đồ google cung cấp.

google.maps.event.addListener(map, 'tilesloaded', function() { 
    //do actions 
}); 

Điều thứ hai tôi tìm ra là bạn không thể chỉ thêm $('#map').click() bên trong trình xử lý sự kiện. Điều này là do mặc dù #map là div vùng chứa - tập lệnh bản đồ google thực sự hiển thị toàn bộ các div khác trên đầu trang (trong đó có chỉ số z cao hơn và cũng là những gì thực sự giữ lát bản đồ của bạn). Với một chút hacking xung quanh, và jquery bạn có thể thu hẹp xuống div chứa gạch và kích hoạt sự kiện click vào đó div ... kết quả đang là:

google.maps.event.addListener(map, 'tilesloaded', function() {  
    $("#map").children().children().first().children().trigger('click'); 
}); 

tôi sử dụng công cụ Dev của Chrome để thu hẹp xuống div chứa gạch và sử dụng phương thức children() của jquery để chuyển qua div đó từ #map. Nếu bạn gắn mã đó vào hàm init của bạn, bạn nên làm tốt. Dưới đây là JSfiddle với ví dụ hoạt động của giải pháp.