Get Position of Mouse Cursor on Mouseover of Googl

问题:

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?

回答1:

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().

回答2:

Here's a solution that uses the MouseEvent of the click event but does not rely on accessing that via an undocumented property that can change at any time like 'ub' or 'wb' (I think it's 'ya' currently).

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

回答3:

Add the following code into the listener function:

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

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

回答4:

The solution that works for me is more straight forward:

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

回答5:

This gives the mouse position, works for me.

function CanvasProjectionOverlay() { }

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

In your initialize function;

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

and use it like this;

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

回答6:

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