获取鼠标光标在Google Maps V3 API Marker的鼠标hover上的位置

当光标鼠标hover在使用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中pageXpageYpageX这样的属性。

我如何获得鼠标光标的位置?

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

将以下代码添加到侦听器函数中:

 // to display a tooltip: marker.setTitle("Hi"); // to get the geographical position: var pos = marker.getPosition(); var lat = pos.lat(); var lng = pos.lng(); // ... 

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

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

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

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

这是一个使用click事件的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; } } }); 
 mapObject.marker.addListener("mouseover", (event) => { //USE THE COORDINATES HERE = { lat: event.latLng.lat(), lng: event.latLng.lng(); }