在Google Maps V3 API标记的鼠标悬停上获取鼠标光标的位置 [英] Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker

问题描述

我试图在光标悬停在使用jQuery的标记上时，在光标位置显示 div 。它的一种就像一个工具提示。但是我似乎无法弄清楚如何获得光标下方的X / Y坐标。

当前代码：

  google.maps.event.addListener（marker，mouseover，function（event）{
 
 $（ #tooltip）。css（{
 position：absolute，
 top：event.pageY，
 left：event.pageX 
}）。toggle（）; 
  

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

这是我之前关于像素位置计算的延伸（Google maps API v3）。引入一个全局变量 overlay ：

  var overlay = new google.maps.OverlayView（）; 
 overlay.draw = function（）{}; 
 overlay.setMap （地图） ; //'map'是新的google.maps.Map（...）
  

使用 overlay 来获取投影和像素坐标：

  google。 maps.event.addListener（marker，'mouseover'，function（）{
 var projection = overlay.getProjection（）; 
 var pixel = projection.fromLatLngToContainerPixel（marker.getPosition（））; 
 //使用pixel.x，pixel.y ...（经过一些舍入）
}）; 
  

您也可以看看 projection.fromLatLngToDivPixel（）。

I am trying to make a div visible at the position of the cursor when the cursor mouseover a marker using jQuery. Its kind of like a tooltip. However I cannot seem to figure out how to get the X/Y coordinates of the point below the cursor.

Current Code:

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

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

I believe event does not have the properties pageY and pageX like in the event in jQuery.

How do I get the osition of the mouse cursor?

解决方案

This is an extension of my previous answer regarding the computation of the pixel positions (Google maps API v3). Introduce a "global" variable overlay:

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

Use overlay in the listener to get the projection and the pixel coordinates:

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)
}); 

You may also have a look at projection.fromLatLngToDivPixel().

这篇关于在Google Maps V3 API标记的鼠标悬停上获取鼠标光标的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！