Question

我只是想知道是否有办法通过键盘打开Google Map InfoWindow。到目前为止，我只能通过点击打开它。

我发现了以下内容：http://www.visionaustralia.org/digital-access-googlemap 但它只处理控件和导航。

$(function(){
    //use mapselector="div" if you don't know the map id
    var mapSelector = "#map_canvas div";
    var attemptInterval = 2;
    var maxAttempts = 18;
    var mA = 0;
    var notYet = true;
    var titles = {"pan up":1,"pan down":1,"pan right":1,"pan left":1, "zoom in":1,"zoom out":1,"show street map":1,"show satellite imagery":1};

    function addKey(){
        mA++;
        if(mA > maxAttempts){return;}
        $(mapSelector).each(function(index){

        var title = this.getAttribute("title")
        if(title) title=title.toLowerCase().trim();
        if(title in titles){
            jqel = $(this);
            titles[title] = jqel;
            jqel.attr("tabindex","0");
            jqel.attr("role","button");
            jqel.keydown(function(ev){
                if(ev.which==13) {
                    $(this).trigger("click")
                }else if(ev.which==40) {
                    titles["pan down"].trigger("click");
                }else if(ev.which==38) {
                    titles["pan up"].trigger("click");
                }else if(ev.which==37) {
                    titles["pan left"].trigger("click");
                }else if(ev.which==39) {
                    titles["pan right"].trigger("click");
                }else if(ev.which==61 || ev.which == 187) {
                    titles["zoom in"].trigger("click");
                }else if(ev.which==173 || ev.which == 189) {
                    titles["zoom out"].trigger("click");
                }else{
                    return
                }
                ev.preventDefault();
            });

            (function(){
                var mo = false;
                var bo = jqel.css("border");
                var ma = jqel.css("margin");
                var bc = jqel.css("background-color");
                var op = jqel.css("opacity");

                jqel.mouseover(function(){mo=true;});
                jqel.mouseout(function(){mo=false;});
                jqel.focus(function(){
                    if(mo)return;
                    $(this).css({"border":"2px solid blue","margin":"-2px","background-color":"transparent","opacity":"1"});
                });
                jqel.blur(function(){$(this).css({"border":bo,"margin":ma,"background-color":bc,"opacity":op});});
                notYet = false;
            })();
        }
    });
    if(notYet){setTimeout(addKey,attemptInterval*1000);}
}
addKey();

}）;

它通过获取控件的标题来工作，所以我尝试将标题添加到标记并将其添加到titles数组但它不起作用。

我对谷歌地图API和JavaScript很新，有关从哪里开始的任何建议？谢谢！

Answer 1

我的Google Maps API知识有点生疏，但如果我没记错的话，API确实提供了一种方法来将监听器附加到标记。但是，正如您所注意到的，它不适用于按键事件。为了完整起见，基本语法如下：

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

addListener函数接受三个参数：

附加事件的项目（本例中为标记）
要侦听的事件类型
事件发生时要执行的lamba或函数（打开infoWindow）

这里重要的一点是第二个参数，即要侦听的事件。这些不是实际的DOM事件，但谷歌自己的抽象事件（为了更好的跨浏览器支持），因此只有select amount可用 - 没有按键事件。

另一方面，JavaScript确实识别了几个关键事件。我懦弱地假设你有jQuery可用（来自你发布的示例代码），所以你可以利用jQuery的keypress函数捕获，按键，然后打开一个infoWindow：

$(document).keypress(function (event) {
    switch (event.which) {
        case 102:
            // lowercase f
            infowindow.open(map, marker);
            break;
    }
});

这应该在您定义的标记位置打开您定义的infoWindow。请注意，此示例仅包含用于为一个标记打开一个 infoWindow的代码。但它应该给你一个大致的想法。

请参阅the following Fiddle我为一个非常粗略和简单的例子，使用'f'键打开infoWindow（点击“结果”框后）。

使用KeyDown / KeyPress打开InfoWindow

1 个答案: