Google Street View JavaScript API 禁用键盘缩放答案

【问题标题】：Google Street View JavaScript API disable keyboard zoomingGoogle Street View JavaScript API 禁用键盘缩放
【发布时间】：2017-09-11 17:22:06
【问题描述】：

如何在 Google 街景视图中禁用键盘快捷键缩放？

根据JavaScript API，将keyboardShortcuts: false 设置为google.maps.MapOptions 应该可以防止通过键盘进行任何控制，但是使用+ 和- 键盘快捷键仍然可以进行缩放。

var map = new google.maps.Map(document.getElementById('map'), {
  center: fenway,
  zoom: 14,
  keyboardShortcuts: false /* should prevent +/- zooming */
});

这是example fiddle。

编辑：正如 geocodezip 指出的那样，keyboardShortcuts 只是俯视图的一个选项。 google.maps.StreetViewPanoramaOptions 没有这些选项。是否可以通过禁用事件手动关闭键盘快捷键？

【问题讨论】：

欢迎来到 Stack Overflow - 很高兴有你。请阅读 How do I ask a good question? 和 How to create a Minimal, Complete, and Verifiable example 以帮助将 Stack Overflows 内容保持在尽可能高的水平，并增加获得适当答案的机会。请在此处粘贴您现在拥有的代码。
keyboardShortcuts: false 控制地图的缩放。 StreetViewPanorama 似乎没有等效控件。
@geocodezip 好点。是否仍可以使用 preventDefault 或类似的按键事件手动禁用快捷方式？

标签： google-maps google-street-view

【解决方案1】：

API 似乎不允许阻止 Google 地图注册键盘事件处理程序，但您可以intercept the events and stop them propagating：

window.addEventListener(
  'keydown',
  (event) => {
    if (
      (
        // Change or remove this condition depending on your requirements.
        event.key === 'ArrowUp' || // Move forward
        event.key === 'ArrowDown' || // Move forward
        event.key === 'ArrowLeft' || // Pan left
        event.key === 'ArrowRight' || // Pan right
        event.key === '+' || // Zoom in
        event.key === '=' || // Zoom in
        event.key === '_' || // Zoom out
        event.key === '-' // Zoom out
      ) &&
      !event.metaKey &&
      !event.altKey &&
      !event.ctrlKey
    ) {
      event.stopPropagation()
    };
  },
  { capture: true },
);

以上将阻止通过键盘移动、平移和缩放，但如果您只想阻止某些快捷键，您可以进行调整。关键是addEventListener() 的capture 选项，它赋予此事件处理程序更高的优先级。

【讨论】：