在Google地图上按箭头键导航，无需点击地图 [英] Arrow keys navigation on Google Maps without clicking the Map

问题描述

我尝试在Google Maps API文档上进行搜索，但也无法找到如何执行此操作的信息。

I tried searching on Google Maps API documentation and also here but I couldn't find out how to do this.

我尝试设置箭头键导航默认情况下在我的地图上，而无需点击地图区域，以启用该功能。

I am trying to set the arrow keys navigation by default on my Map, without the needing to click on the Map area in order to enable that.

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

I tried the following solution without success:

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

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

Anyone have a clue how that can be done?

谢谢大家。

Thank you all.

推荐答案

这里有几件事要注意，只需使用 .focus（）或触发 #map div元素上的点击操作不会执行任何操作，因为这些操作发生在地图实际获取之前在DOM上呈现。因此，首先要确认的是使用google地图库提供的 tilesloaded 事件。

Couple of things to take note of here, simply using .focus() or triggering a click action on the #map div element will not do the trick because those actions take place before the map actually gets rendered on the DOM. So, the first thing to acknowledge is the use of the tilesloaded event the google maps library provides.

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

我发现的第二件事是你不能只添加 $（'＃map'）。click（）在事件监听器中。这是因为虽然 #map 是容器div，但Google Maps脚本实际上呈现了一大堆其他div（它们具有更高的z-index并且是还有什么实际上持有你的地图瓷砖）。随着一点点的黑客和jQuery的你可以缩小到包含瓷砖的div，并触发该div上的点击事件...结果代码是：

The second thing I came to find out is you can't just add $('#map').click() inside the event listener. This is because though the #map is the container div - the google maps script actually renders a whole bunch of other divs on top of it (which have higher z-indices and are also what actually holds your map tiles). With a little bit of hacking around, and jquery you can narrow down to the div that contains the tiles and trigger the click event on that div...resulting code was:

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

我使用Chrome的Dev工具缩小了包含tile的div，并使用了jquery的 children（）方法从 #map 中遍历该div。如果您将该代码粘贴到您的init函数中，则应该很好。这是一个 JSfiddle ，并提供了一个解决方案的实例。

I used Chrome's Dev tools to narrow down to the div containing the tiles and used jquery's children() method to traverse to that div from the #map. If you stick that code into your init function, you should be good to go. Here's a JSfiddle with a working example of the solution.

这篇关于在Google地图上按箭头键导航，无需点击地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！