处理ctrl +点击谷歌地图

时间:2014-02-13 15:04:16

标签: javascript google-maps-api-3

我试图通过按下控制键并点击标记,让用户在我的地图上选择多个标记。

为此,我写了这段代码:

google.maps.event.addListener(marker, 'click', function (e) {
    // detect if is pressed ctrlKey or not to do stuff
}

在GoogleMaps V3 docs中,除了e属性之外,没有关于此latLng对象的信息或文档。 但是当我使用谷歌浏览器进行调试时,我看到这个Ra对象包含了我所需要的内容。 我的问题是,如果按下ctrlKey,将这个未记录的Ra访问权限硬编码是安全的吗?

enter image description here

2 个答案:

答案 0 :(得分:9)

正如评论中所要求的,包含Ra的重要内容是什么?我的经验是,Google地图会不断更改这些内部变量/对象名称。


然而,我做了一个演示,通过按住 ctrl 并点击标记来显示如何选择多个标记:

见小提琴 - >的 http://jsfiddle.net/FbGa5/
注意:您必须在 ctrl 之前点击地图一次激活iframe,否则可以捕获任何其他按键。

跟踪 ctrl 键:

var selecting = false,
    selectedMarkers = [];

window.onkeydown = function(e) {
  selecting = ((e.keyIdentifier == 'Control') || (e.ctrlKey == true));
}
window.onkeyup = function(e) {
  selecting = false;
}

如果 ctrl -key已关闭并且单击了标记,请选择标记。如果选择了标记,则会变为蓝色,如果取消选择标记,则会变为红色:

google.maps.event.addListener(marker, 'click', function() {
   if (!selecting) return;
   var id = this.id;
   var index = selectedMarkers.indexOf(id);
   if (index>-1) {
     this.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png');
     selectedMarkers.splice(index, 1);
   } else {
     selectedMarkers.push(id);             
     this.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png');
   }
});

结论:在标记点击事件中,您不需要Ra或任何其他参数,以使其发挥作用。

答案 1 :(得分:1)

我猜团体成员因缩小而改变了。 我的想法,我知道并不完美,就是按类型查找MouseEvent 而不是名字。然后,找到后,给它一个你知道的常量名称

google.maps.event.addListener(marker, 'click', function (e) {
    // detect if is pressed ctrlKey or not to do stuff

   //detect the mouse event member by type
    //and always give it the name "mouseEvent"         
    for (var key in e) {
        if (e[key] instanceof MouseEvent) {
           e["mouseEvent"] = e[key];
           break;
         }
     }

   // e.mouseEvent.ctrlKey ....

}