获取鼠标光标在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中pageX
像pageY
和pageX
这样的属性。
我如何获得鼠标光标的位置?
这是我之前关于像素位置计算的答案的扩展(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(); }