Obtenir la position du curseur de la souris sur le survol de l'API Google Maps V3

Je suis en train de faire un div visible à la position du curseur lorsque le curseur de la souris d'un marqueur à l'aide de jQuery. Son un peu comme une info-bulle. Cependant, je n'arrive pas à comprendre comment obtenir les paramètres X et Y les coordonnées du point en dessous du curseur.

Code Actuel:

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

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

Je crois event n'a pas les propriétés pageY et pageX comme dans le cas de jQuery.

Comment puis-je obtenir la osition du curseur de la souris?

source d'informationauteur Nyxynyxx

  1. 20

    C'est une extension de ma réponse précédente concernant le calcul des positions des pixels (Google maps API v3). Introduire un "global" variable overlay:

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

    Utilisation overlay dans le port d'écoute pour obtenir la projection et le pixel de coordonnées: 

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

    Vous pouvez également jeter un oeil à projection.fromLatLngToDivPixel().

  2. 1

    Ajouter le code suivant dans la fonction écouteur:

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

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

    La solution qui fonctionne pour moi est plus simple:

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

    Cela donne la position de la souris, fonctionne pour moi.

    function CanvasProjectionOverlay() { }

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

    Dans votre fonction d'initialisation;

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

    et de l'utiliser comme cela;

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

    Voici une solution qui utilise la MouseEvent de l'événement click, mais ne comptez pas sur l'accès que par l'intermédiaire d'un sans-papiers de propriété qui peuvent changer à tout moment comme ac' ou 'wb' (je pense que c'est 'ya' actuellement).

    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. 0
    mapObject.marker.addListener("mouseover", (event) => {
  //USE THE COORDINATES HERE = { lat: event.latLng.lat(), lng: event.latLng.lng();
}