无需单击地图即可在Google地图上按箭头键导航

Question

我尝试在Google Maps API文档上搜索,但也在这里找不到如何执行此操作.

我试图在我的地图上默认设置箭头键导航,而不需要点击地图区域以启用它.

我尝试了以下解决方案但没有成功:

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

任何人都知道如何做到这一点？

谢谢你们.

Answer 1

在这里需要注意的事情,只需.focus()在#mapdiv元素上使用或触发单击操作就不会有效,因为这些操作发生在地图实际在DOM上呈现之前.因此,首先要承认的是使用tilesloaded谷歌地图库提供的事件.

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

我发现的第二件事是你不能只$('#map').click()在事件监听器中添加.这是因为虽然它#map是容器div - 谷歌地图脚本实际上呈现了一大堆其他div(它具有更高的z-indices,也是实际上保存地图图块的东西).通过一些黑客攻击和jquery,您可以缩小到包含tile的div并触发该div上的click事件...结果代码是:

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

我使用Chrome的Dev工具缩小到包含tile的div,并使用jquery的children()方法遍历到div中的div #map.如果您将该代码粘贴到init函数中,那么您应该很高兴.这是一个JSfiddle,有一个解决方案的工作示例.