时间戳

首页 > 解决方案 > How To Disable Panning With Arrow Keys On Google Maps API

javascript - How To Disable Panning With Arrow Keys On Google Maps API

问题描述

Using the Google Maps API on a web page, I'm able to use the keyboard's up/down and right/left arrow keys to pan the map. I want to allow the user to drag/pan the map via the mouse as normal, but want to disable panning from the keyboard arrow presses that is occurring after the map is clicked. How can I do this?

For background, I'm using the arrow keys on the web page for other functionality (to move up and down an HTML list), and don't want the map to move around when the user presses arrow keys.

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

您可以将keyboardShortcuts选项设置MapOptions为false禁用地图上的键盘操作

简单示例 JSBin

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          keyboardShortcuts: false,
          gestureHandling: "greedy",
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY"
    async defer></script>
  </body>
</html>

推荐阅读