google-maps-api-3 - Google map V3 键盘辅助功能

Question

我正在构建一张 map ，我希望它可以通过键盘访问。 V3 默认情况下可通过键盘访问，但似乎在单击 map 之前无法访问键盘功能。我添加了一个链接来选择它会将您带到包含 map 的 div 标签，但这没有用。有没有什么方法可以在不实际使用鼠标的情况下激活一般的 map 点击事件。

谢谢，

克

Answer 1

我通常这样做的方法是首先通过向其添加 tabindex="0" 使 map div 可聚焦。这会将其添加到浏览器的自然 Tab 键顺序中。然后，我为 keyup 添加了一个事件监听器，其中包含一个根据按下的键调用 map.panBy 或 map.setZoom 的开关。这是一个 jQuery 示例，但同样可以使用 google.maps.event.addListener(map, 'keyup', function() {...etc.}); 来完成。 jQuery 为您制作 event.which 跨浏览器，因此代码更简单。

$('#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;
    }
});