google-maps - 谷歌地图上的箭头键导航，无需点击地图

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 索引并且也是实际保存地图图块的内容）。通过一些黑客攻击和 jquery，您可以缩小到包含图块的 div 并触发该 div 上的点击事件......结果代码是：

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

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