Получить позицию курсора мыши на мыши на Google Maps V3 API Marker

Я пытаюсь сделать div видимым в позиции курсора, когда курсор наведет маркер с помощью jQuery. Его вроде как всплывающая подсказка. Однако я не могу понять, как получить координаты X/Y точки под курсором.

Текущий код:

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

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

Я полагаю, что event не имеет свойств pageY и pageX, как в случае с jQuery.

Как получить оцифровку курсора мыши?

Ответы

Ответ 1

Это расширение моего предыдущего ответа относительно вычисления позиций пикселей (API карт Google 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().

Ответ 2

Добавьте следующий код в функцию слушателя:

// 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

Решение, которое работает для меня, более прямолинейно:

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

Ответ 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;
});

Ответ 5

Здесь решение, которое использует MouseEvent события click, но не полагается на доступ к нему через недокументированное свойство, которое может быть изменено в любое время, например, "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;
        }
    }
});

Ответ 6

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