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

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

Answer 2

这是一个使用click事件的MouseEvent的解决方案，但不依赖于通过一个未记录的属性来访问它，该属性可以随时更改，如'ub'或'wb'（我认为它是'ya'）。< / p>

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

Answer 3

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

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

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

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

Answer 5

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

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

5 个答案: