Javascript 获取鼠标光标在 Google Maps V3 API 标记鼠标悬停上的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6558160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker
提问by Nyxynyxx
I am trying to make a divvisible 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.
div当光标鼠标悬停在使用 jQuery 的标记上时，我试图使光标位置可见。它有点像工具提示。但是我似乎无法弄清楚如何获得光标下方点的 X/Y 坐标。
Current Code:
当前代码：
google.maps.event.addListener(marker, "mouseover", function(event) {
$("#tooltip").css({
position: "absolute",
top: event.pageY,
left: event.pageX
}).toggle();
I believe eventdoes not have the properties pageYand pageXlike in the event in jQuery.
我相信在 jQuery 中的事件中event没有属性pageY和pageX喜欢。
How do I get the osition of the mouse cursor?
如何获得鼠标光标的位置？
回答by Jiri Kriz
This is an extension of my previous answer regarding the computation of the pixel positions (Google maps API v3). Introduce a "global" variable overlay:
这是我之前关于像素位置计算的答案的扩展（谷歌地图 API v3）。引入一个“全局”变量overlay：
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)
Use overlayin the listener to get the projection and the pixel coordinates:
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)
});
You may also have a look at projection.fromLatLngToDivPixel().
你也可以看看projection.fromLatLngToDivPixel()。
回答by zeke
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).
这是一个使用单击事件的 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;
}
}
});
回答by Jiri Kriz
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();
// ...
回答by urbanit
The solution that works for me is more straight forward:
对我有用的解决方案更直接：
map.data.addListener('mouseover', function (event) {
posX = event.ub.clientX;
posY = event.ub.clientY;
});
回答by Shane Best
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;
});
回答by Cris R
mapObject.marker.addListener("mouseover", (event) => {
//USE THE COORDINATES HERE = { lat: event.latLng.lat(), lng: event.latLng.lng();
}
