Question

是否可以在页面加载后立即激活Google Maps（StreetView）的键盘绑定？我发现了一个有效的示例here，不幸的是它使用了不再受支持的Google Maps API v2。如果您嵌入了普通的Google Maps StreetView，则键盘绑定最初不会在您点击地图之前工作（请参阅here）。

是否有可能在v3中执行此操作？我已经尝试this和this但没有成功，因为那不适合街景。

使用键盘绑定

更新我特别考虑到箭头键在地图上移动

由于

问候

Answer 1

好的，找到了解决方案并为此创建了Gist。

Answer 2

@ChristianB提出的解决方案对我不起作用。也许是因为它适用于较旧版本的Google Maps 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中测试过代码。

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

2 个答案: