Google地图V3键盘辅助功能 [英] Google Maps V3 Keyboard Accessibility

问题描述

我正在制作一张我想要键盘访问的地图。 V3默认情况下可以通过键盘访问，但似乎只有点击地图后才能访问键盘功能。我添加了一个链接来选择哪一个将你带到包含地图的div标签，但是这没有奏效。

谢谢，

有没有一些方法可以激活一般的地图点击事件。 g

解决方案

我通常这样做的方式是通过添加 tabindex =0即可。这将其添加到浏览器的自然标签顺序中。然后，我用一个开关调用map.panBy或map.setZoom，根据按下的按键为 keyup 添加一个事件监听器。这里有一个jQuery示例，但是也可以使用 google.maps.event.addListener（map，'keyup'，function（）{... etc。}）; 。

  $（'＃map'）。jQuery为您提供了跨浏览器的事件，因此代码更简单。 keyup（function（event）{
 var o = 128; //一半瓦片的宽度
 switch（event.which）{
 case 37：// leftArrow 
 map.panBy （-o，0）; 
 break; 
 case 38：// upArrow 
 map.panBy（0，-o）; 
 break; 
 case 39： // rightArrow 
 map.panBy（o，0）; 
 break; 
 case 40：// downArrow 
 map.panBy（0，o）; 
 break ; 
 case 109：// numpad  -  
 case 189：//  -  
 map.setZoom（map.getZoom（） -  1）; 
 break; 
 case 107：// numpad + 
 case 187：// = 
 map.setZoom（map.getZoom（）+ 1）; 
 break; 
} 
}） ; 
  

I'm building a map which i would like to be keyboard accessible. V3 is by default keyboard accessible but it seems you cannot access the keyboard functionality until the map has been clicked on. I added a link to select which brings you to the div tag which contains the map but this has not worked. Is there some way to activate the general map click event without actually using the mouse.

Thank you,

g

解决方案

The way I usually do this is to start by making the map div focussable by adding tabindex="0" to it. That adds it into the browser's natural tab order. Then I add an event listener for keyup with a switch that calls map.panBy or map.setZoom depending on the key pressed. Here's a jQuery example, but the same can be done with google.maps.event.addListener(map, 'keyup', function() {...etc.});. jQuery makes the event.which cross-browser for you, so the code is simpler.

$('#map').keyup(function(event) {
    var o = 128; // half a tile's width 
    switch(event.which) {
        case 37: // leftArrow
            map.panBy(-o,0);
            break;
        case 38: // upArrow
            map.panBy(0,-o);
            break;
        case 39: // rightArrow
            map.panBy(o,0);
            break;
        case 40: // downArrow
            map.panBy(0,o);
            break;
        case 109: // numpad -
        case 189: // -
            map.setZoom(map.getZoom()-1);
            break;
        case 107: // numpad +
        case 187: // =
            map.setZoom(map.getZoom()+1);
            break;
    }
});

这篇关于Google地图V3键盘辅助功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！