Навигация по клавишам со стрелками на Картах Google без нажатия на карту

Я попробовал поиск в документации по API Карт Google, а также здесь, но я не смог узнать, как это сделать.

Я пытаюсь установить навигацию по клавишам со стрелками по умолчанию на моей карте, не требуя щелчка по области карты, чтобы это сделать.

Я пробовал следующее решение без успеха:

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

Кто-нибудь знает, как это можно сделать?

Спасибо всем.

Ответы

Ответ 1

Несколько вещей, которые нужно учитывать здесь, просто используя .focus() или запуская действие click в элементе #map div, не будет делать трюк, потому что эти действия происходят до того, как карта действительно будет отображаться в DOM. Итак, первое, что нужно признать, это использование события tilesloaded, которое предоставляет библиотека карт google.

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

Во-вторых, я пришел к выводу, что вы не можете просто добавить $('#map').click() внутри прослушивателя событий. Это связано с тем, что, хотя #map является контейнером div, карты google script на самом деле отображают целую кучу других div сверху (которые имеют более высокие z-индексы, а также то, что на самом деле содержит ваши карты). С небольшим количеством взлома и jquery вы можете сузить до div, который содержит плитки, и вызвать событие click на этом div... в результате получилось следующее:

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

Я использовал инструменты Chrome Dev, чтобы сузить до div, содержащего фрагменты, и использовать метод jquery children() для перехода к этому div из #map. Если вы вставляете этот код в свою функцию init, вам должно быть хорошо идти. Здесь JSfiddle с рабочим примером решения.