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

Question

我尝试在 Google Maps API 文档和此处搜索，但我找不到如何执行此操作。

我试图在我的 map 上默认设置箭头键导航，而无需单击 map 区域来启用它。

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

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

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

谢谢你们。

Answer 1

这里需要注意几件事，只需使用 .focus()或触发 #map 上的点击操作div 元素不会起作用，因为这些操作发生在 map 实际在 DOM 上呈现之前。所以，首先要承认的是 tilesloaded 的使用。谷歌地图库提供的事件。

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

我发现的第二件事是你不能只添加 $('#map').click()在事件监听器内部。这是因为尽管 #map是容器 div - 谷歌地图脚本实际上在它上面渲染了一大堆其他 div(它们具有更高的 z 索引，也是实际保存 map 图 block 的东西)。通过一些黑客攻击和 jquery，您可以缩小到包含图 block 的 div 并触发该 div 上的点击事件......结果代码是:

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

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