Question

我想在按下 PAGE DOWN 或 RIGHT ARROW 键时阻止Google地图移动：

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element, {
    zoom: 17,
    center: { lat: parseFloat(48), lng: parseFloat(2) }
  });
  var pos = new google.maps.LatLng(48,2);
  var marker = new google.maps.Marker({ position: pos, map: map, title: '', draggable: true });
  var infowindow = new google.maps.InfoWindow({ content: '<div contenteditable="true" id="infowindowtext">Test</div>' });
  infowindow.open(map, marker);
  
  google.maps.event.addDomListener(document, 'keydown', function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 34) {
        e.preventDefault();
        alert();
        return false;
    }
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div id="map-canvas" style="min-height: 400px;"></div>  
</div><script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps"></script>

但这就是发生的事情：

点击地图（以获得焦点）并按 PAGE DOWN
地图无法移动
出现alert()弹出窗口
让我们点击确定
地图移动（不需要的）

另一个例子：

点击标记可编辑文本框并撰写一些文字
按右箭头
地图移动（不需要）但光标不会在文本框中移动

如何在执行 PAGE DOWN 或 RIGHT ARROW 时完全阻止地图移动？

Answer 1

你走了！

我们使用jquery来获取活动元素，以便我们可以观察keyDown。

然后检查按钮的代码是否为34，如果是，我们返回false。

使用一些jQuery：

<script>
  $($(document.activeElement)).keydown(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 34) {
      return false;
    }
  });
</script>

编辑：因为更新后的问题按原样保留，并将js更改为：将JS设置为：

    itens = [{
  lat: -22.9187655,
  lng: -43.258619
}, {
  lat: -23.5245363,
  lng: -51.6667318
}];
var mapOptions = {
  zoom: 5,
  minZoom: 4,
  maxZoom: 20,
  center: {
    lat: 48,
    lng: 2
  },
  fullscreenControl: true
}

var map;

function initMaps() {
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var pos = new google.maps.LatLng(48, 2);
  var marker = new google.maps.Marker({
    position: pos,
    map: map,
    title: '',
    draggable: true
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
    map.setOptions({
      keyboardShortcuts: false
    });
  });

}

var infowindow = new google.maps.InfoWindow({
  content: '<div contenteditable="true" id="infowindowtext">Test</div>',
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
  map.setOptions({
    keyboardShortcuts: true
  });
});

JSFIDDLE（更新）：https://jsfiddle.net/cmjcs5eL/10/

使用键盘键阻止在Google地图上移动

1 个答案: