多边形鼠标悬停事件位置

Question

我的网站有问题。我需要捕获“mousemove”事件，然后根据事件发生时光标的位置更改提示窗口的位置。代码如下：

google.maps.event.addListener(country, 'mousemove', function(e) {
      this.setOptions({fillOpacity: 1});
      $('div.info-win').css('top', e.kb.clientY + 20 + 'px');
      $('div.info-win').css('left', e.kb.clientX -50 + 'px');
      $('div.info-win').show()
});

起初一切正常，但很快浏览器开始显示错误，即 e.kb 未定义。我通过控制台检查了事件，并意识到“e.kb”确实不存在。取而代之的是“e.lb”，所以我在代码中对其进行了更改。但现在问题是一样的，控制台告诉我“e.lb”不存在。我无法解释，但现在捕获的事件具有“.gb”属性而不是“.lb”。有人可以帮助我并解释为什么每周都会再次发生这种情况，所以我需要始终检查事件属性的名称？这是我第一次看到这样的问题，但同时我找不到任何解决方案！

Answer 1

您的地图工作了一段时间然后开始失败的原因是您使用了 MouseEvent 对象的未记录属性。正如您所发现的，这些可能随时更改。

想一想：kb 和 lb 和 gb 听起来像 您 在您的代码中用来描述鼠标位置的名称吗？你会像那样随意改变它们吗？ :-)

那么，为什么 Google 会使用这些乱七八糟的名称，以及为什么他们一直在更改它们呢？

在他们的开发人员处理的原始源代码中，他们当然使用可读且一致的名称。但随后他们使用“缩小器”编译代码，缩短私有变量/属性/方法名称以加快加载速度。当他们修改源代码并重新编译时，这些短名称会被任意重新分配。

您在几周内发现的三个不同的属性名称显然都指向原始源中的同一个对象，但压缩器更改了您在浏览器中看到的名称。

永远不要假设您可以使用在浏览器的开发人员工具中发现的属性或方法 - 特别是如果它的名称没有意义。先在Maps API documentation中查看，如果没有就不要使用了。

请参阅Seyong's answer，了解如何更改代码以使用文档化方法的详细信息。

Answer 2

Google Maps MouseEvent 不提供屏幕 X 和 Y 值。

相反，它似乎只给出鼠标位置的纬度/经度。

参考：

https://developers.google.com/maps/documentation/javascript/reference#MouseEvent https://developers.google.com/maps/documentation/javascript/reference#PolyMouseEvent

您需要将纬度/经度值转换为此处解释的屏幕鼠标 X/Y 位置（类似问题）：

Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker