在谷歌地图v3多边形上检测鼠标事件的shiftKey

Question

使用谷歌地图V3（.16）javascript API时，有没有办法检测多边形上的移位鼠标点击？ https://developers.google.com/maps/documentation/javascript/reference#MouseEvent

我确实收到了鼠标事件，我可以看到原始事件包含在google事件类中，这正是所需要的（访问事件。 Ua .shiftKey属性）。

然而，我发现上个月谷歌可能已更新了他们的api，现在该属性已重命名为event。 Pa .shiftKey。

有关参考，请参阅http://i.stack.imgur.com/80npD.png以获取webinspector中事件结构的屏幕截图。 有没有办法检测在使用该事件点击谷歌地图多边形时是否按下了Shift键，而不必依赖google-not-updating-their-api？我错过了什么？

THX！

Answer 1

使用未记录的属性几乎总是一个坏主意。如果您可以可能避免它，请避免它。在这种情况下，API可能正在使用Closure Compiler进行压缩，因此下次更新时，它可能不再是Pa。

  

有没有办法检测在使用该事件点击Google地图多边形时是否按下了Shift键，而无需依赖google-not-updating-their-api？

如果只是Ua与Pa：

您可以使用功能检测：

var shiftKey = (event.Ua || event.Pa).shiftKey;

使用JavaScript的curiously powerful || operator来引用Ua属性的值，如果有一个属性，或者Pa属性＆否则就是＃39;

这假设当他们从Ua更改为Pa时，他们不会将Ua用于其他内容。如果有机会，这个更彻底的版本会这样做：

var shiftKey = ((event.Ua && 'shiftKey' in event.Ua) ? event.Ua : event.Pa).shiftKey;

具体检查具有Ua属性的shiftKey对象，如果找不到，则回退到Pa。

如果它可以是任何

...你可以搜索它：

var shiftKey;
if (Object.keys(event).some(function(key) {
      if (event[key] && 'shiftKey' in event[key]) {
          shiftKey = event[key].shiftKey;
          return true;
      }
      return false;
  })) {
    // We found it, `shiftKey` has the value
} else {
    // We didn't find it
}

附注：Object.keys是所有现代浏览器中都存在的ES5功能。如果您需要支持IE8等旧浏览器，可以将其填充。

Answer 2

我最终找到了接近amenadiel's answer的解决方案。我认为最好不要中继所有可能的uglified变量名，而是寻找一个MouseEvent并使用那个检查shiftKey属性，如下所示：

function polygonListener(polygonEvent) { 
  var shiftKey = false;
  for(var i in polygonEvent){
    if(polygonEvent[i] instanceof window.MouseEvent){
      shiftKey = polygonEvent[i].shiftKey;
      break;
    }
  }
  // Rest of the code
}

Answer 3

我刚遇到这个问题（注意到我不能只使用window.event，因为Firefox不支持它）

google.maps.mouseEvent，正如T.J. Crowder说，一个包含shiftKey，altKey等密钥的属性。在当前版本的google maps api中，所述属性为va。所以我们当然不能使用它，因为它的名字会在下一个版本中改变。

所以我的解决方案是迭代google.maps.mouseEvent参数，检查其值，看看哪一个是有效的window.MouseEvent。

var newcircle= new google.maps.Circle({map:map, position:map.getCenter(), radius:1000});

google.maps.event.addListener(newcircle,'click',function(mouseEvent) { 
    var event = Object.values(mouseEvent)
        .filter(function (property) {
          return property instanceof window.MouseEvent;
        });

    if (event.length) {
      event = event[0];
    } else {
      event = {};
    }
    var shiftKey = event.shiftKey || false;
});

有趣的是，当我尝试在此示例中使用标记时，window.MouseEvent中没有google.maps.mouseEvent的实例。

Answer 4

万一有人还在寻找如何从Google Maps事件中获取MouseEvent的方法，这就是我一直使用的方法。

const mouseEvent = Object.values(event).find(p => p instanceof window.MouseEvent);
// then do whatever with the MouseEvent
const shiftKey = mouseEvent.shiftKey;