如何从Google地图（V3）的LatLng获取屏幕XY坐标？

Question

我在地图上有一条折线。当用户点击折线时，我想知道像素（屏幕）xy坐标。点击事件只返回LatLng对象，那么有没有人知道如何从latLng获取像素坐标呢？

如果有人能帮助我，我将不胜感激！

- SuperCell

---

当你说像素坐标时，是指鼠标的x y坐标吗？ - KJYe.Name

是的，准确地说就是容器 div 的 xy。 - SuperCell

Answer 1

如果您有LatLng对象，则可以使用Google地图投影对象将其转换为瓦片坐标，然后再转换为像素坐标：

有关投影类的文档： https://developers.google.com/maps/documentation/javascript/reference#Projection Google的示例解释如何将LatLng转换为像素坐标： https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?csw=1 有一个注意点。上述代码将在Google地图div内给出像素坐标（根据您的需求可能需要）。如果您想要相对于屏幕左上角的像素，请进行视口左上角的相同投影并将两者相减。这将给出LatLng点的像素坐标。

我最终使用的代码如下（请注意，“latLng”是输入）：

var numTiles = 1 << map.getZoom();
var projection = map.getProjection();
var worldCoordinate = projection.fromLatLngToPoint(latLng);
var pixelCoordinate = new google.maps.Point(
        worldCoordinate.x * numTiles,
        worldCoordinate.y * numTiles);

var topLeft = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);

var topLeftWorldCoordinate = projection.fromLatLngToPoint(topLeft);
var topLeftPixelCoordinate = new google.maps.Point(
        topLeftWorldCoordinate.x * numTiles,
        topLeftWorldCoordinate.y * numTiles);

return new google.maps.Point(
        pixelCoordinate.x - topLeftPixelCoordinate.x,
        pixelCoordinate.y - topLeftPixelCoordinate.y
)

- Bryan Johnson

---

运行得非常好。这是目前正确而完整的答案！ - kashiraja

我知道这是一个老问题，但你能解释一下这行代码吗？ "var numTiles = 1 << map.getZoom();" - CodeOwl

@CodeOwl 很久没碰了，但我记得在视口中可以放置的瓷砖数量大约是2 ^ 缩放级别。这行代码可以重写为Math.pow(2, 15)，以使其更加清晰明了。 - Bryan Johnson

Answer 2

来自@Bryan Johnson的答案是正确的，但在某些情况下还不够，所以我在这里记录下来，供需要的人（或将来的我）参考：

1. 如果标题不等于0，那么它就不再正确。
2. 如果你改变缩放比例、拖动地图，即使你在zoom_changed或bounds_changed中处理了它，它也不再正确。投影似乎与地图动画不匹配。

因此，为了始终获得正确的坐标，您需要创建一个自定义的OverlayView，并在draw函数中处理投影变化。

我在这里做了一个示例：

jsfiddle
https://jsfiddle.net/tienketnoi/x4610Lsb/33/

你还可以在这里查看Google的原始指南： https://developers.google.com/maps/documentation/javascript/customoverlays

- Xuan Tien