javascript - 在 Google Maps V3 API 标记的鼠标悬停上获取鼠标光标的位置

Question

我正在尝试使用 jQuery 将光标悬停在标记上时使 div 在光标位置可见。它有点像工具提示。但是我似乎无法弄清楚如何获取光标下方点的 X/Y 坐标。

当前代码:

google.maps.event.addListener(marker, "mouseover", function(event) {

    $("#tooltip").css({
        position: "absolute",
        top: event.pageY,
        left: event.pageX
    }).toggle();

我相信 event 没有像 jQuery 事件中那样的属性 pageY 和 pageX。

如何获取鼠标光标的位置？

Answer 1

这是我之前关于像素位置计算的回答的扩展(谷歌地图 API v3)。引入一个“全局”变量overlay:

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)

在监听器中使用overlay获取投影和像素坐标:

google.maps.event.addListener(marker, 'mouseover', function() {
    var projection = overlay.getProjection(); 
    var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
    // use pixel.x, pixel.y ... (after some rounding)
}); 

您还可以查看 projection.fromLatLngToDivPixel()。