使用按键/按键打开InfoWindow

Question

我只是想知道是否有一种通过键盘打开Google的方法。到目前为止，我只能通过点击打开它。

我发现了以下内容：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();

})；

它通过获取控件的标题来工作，因此我尝试向标记添加一个标题，并将其添加到title数组中，但它不起作用。

我对Google和JavaScript非常陌生，对从哪里开始有什么建议吗？谢谢!

Answer 1

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

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

addListener函数接受三个参数：

• 要附加事件的项目(在本例中为标记)
• 要侦听的事件类型。
• 当事件发生时要执行的lamba或函数(打开infoWindow)

这里的重要部分是第二个参数，用于侦听的事件。这些不是实际的DOM事件，而是谷歌自己的抽象事件(为了更好的跨浏览器支持)，因此只有一个选择金额可用-没有按键事件。

另一方面，JavaScript确实识别了几个关键事件。我很懦弱地假设您有可用的jQuery (从发布的示例代码中)，这样您就可以利用jQuery的keypress函数捕获一个按键，然后用它打开一个infoWindow：

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

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

请参阅我创建的一个非常粗糙和简单的示例，使用'f‘键打开您的下面的Fiddle (在单击“infoWindow”框架后)。