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

Posted 2023-02-23

【中文标题】在 Google Maps V3 API 标记鼠标悬停时获取鼠标光标的位置

【英文标题】：Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker

【发布时间】：2011-09-27 08:10:24

【问题描述】：

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

当前代码：

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

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

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

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

【参考方案1】：

在监听函数中加入如下代码：

// to display a tooltip:
marker.setTitle("Hi");

// to get the geographical position:
var pos = marker.getPosition();
var lat = pos.lat();
var lng = pos.lng();
// ...

【讨论】：

如何转换为相对于文档或 div 的 latlng 坐标？

我的第二个答案中介绍了转换“latlng -> 像素坐标”。

【参考方案2】：

这是我之前关于像素位置计算的答案的扩展（Google maps 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()。

【讨论】：

我也用jquery解决了这个问题，没有google map api，但是你提出的解决方案更好:)

嗯，这里获取的不是鼠标光标的位置，而是监听事件的标记的位置

是的，我也想要鼠标位置，如果你真的想得到这个值@Robin我知道一个（非常老套的）方法来得到它。如果你愿意，我可以在这里发布。但它需要 jQuery，因为它涉及延迟事件。

【参考方案3】：

对我有用的解决方案更直接：

map.data.addListener('mouseover', function (event) 
    posX = event.ub.clientX;
    posY = event.ub.clientY;
);

【讨论】：

这不再有效。您需要 event.wb.clientX，覆盖答案是唯一继续工作的答案。

您对 ub 和 wb 的看法是正确的。我会去尝试覆盖答案。

【参考方案4】：

这给出了鼠标位置，对我有用。

function CanvasProjectionOverlay()  

CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function ()  ;
CanvasProjectionOverlay.prototype.draw = function ()  ;
CanvasProjectionOverlay.prototype.onRemove = function ()  ;

在你的初始化函数中；

canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);

并像这样使用它；

google.maps.event.addListener(marker, 'mouseover', function(event)  
   var divPixel = canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(event.latLng);
   x = divPixel.x;
   y = divPixel.y;
); 

【讨论】：

我不知道为什么它对任何其他人都不起作用。这是完美的答案

请解释为什么这本质上不是 Jiri 答案的副本？它也像 Jiri 的回答一样，不提供鼠标坐标。它提供标记坐标。

【参考方案5】：

这是一个使用单击事件的 MouseEvent 的解决方案，但不依赖于通过可随时更改的未记录属性访问该事件，例如“ub”或“wb”（我认为目前是“ya”）。

map.data.addListener('mouseover', function (e) 
    var keys = Object.keys(e);
    var x, y;
    for (var i = 0; i < keys.length; i++) 
        if (MouseEvent.prototype.isPrototypeOf(e[keys[i]])) 
            x = e[keys[i]].clientX;
            y = e[keys[i]].clientY;
        
    
);

【参考方案6】：

mapObject.marker.addListener("mouseover", (event) => 
  //USE THE COORDINATES HERE =  lat: event.latLng.lat(), lng: event.latLng.lng();

【参考方案7】：

当您将鼠标悬停在标记上时，event.domEvent.clientX 和 event.domEvent.clientY 会为您提供您在 DOM 上单击标记的位置。如果您减去偏移量，它将为您提供标记本身的中心点（以像素为单位）。

这将为您提供标记的准确中心点。

marker.addListener("mouseover", (event) => 
    const x = event.domEvent.clientX - event.domEvent.offsetX,
    const y = event.domEvent.clientY - event.domEvent.offsetY,
);