在页面加载后立即激活谷歌地图键盘绑定

Question

是否可以在页面加载后立即激活谷歌地图(街景)的键盘绑定?我在这里找到了一个工作示例，不幸的是它使用的是不再支持的Google Maps API v2。如果你嵌入一个普通的谷歌地图街景，键盘绑定不工作之前，你最初点击地图(见这里)。

是否有可能在v3中这样做?我已经尝试了这个和这个，但没有成功，因为这对街景不起作用。

更新:与键盘绑定，我特别想到箭头键在地图上移动

感谢

问候

Answer 1

好的，找到了一个解决方案并创建了一个Gist

Answer 2

@ChristianB提出的解决方案对我不起作用。也许是因为它适用于旧版本的谷歌地图API(我的是v3)，或者它使用不同的渲染模式(我的是webgl，它使用画布)。

我所做的是等待position_changed事件触发，然后在canvas元素上设置tabIndex属性，然后触发canvas元素上的focus()。之后键盘绑定工作。

代码:

var panorama = new google.maps.StreetViewPanorama({
  ...
  //forcing webgl 
  mode: 'webgl'
});
//Set an event listener for position_changed, 
//this will be triggered the first time the panorama is loaded, 
//and every time the position changes
google.maps.event.addListener(panorama, 'position_changed', function() {
  //This is how to get the canvas in my current version of the Google Maps API, 
  //note that this might change in the future.
  var canvas = document.querySelector('canvas.widget-scene-canvas');
  //first set a tabindex on the canvas, 
  //without it focus will not make the canvas the active element
  canvas.setAttribute("tabindex", "-1");
  canvas.focus();
  //To test that it worked you can check that document.activeElement is the canvas
  console.log(document.activeElement);
});

您可能希望将代码放在一个单独的函数中，并在画布失去焦点时调用它。

在Google Chrome v55中测试的代码