如何从 (x, y) 屏幕坐标转换为 LatLng(谷歌地图) [英] How to convert from (x, y) screen coordinates to LatLng (Google Maps)

问题描述

我正在使用 Google Maps 和 Leap Motion 实现一个应用程序，我现在想要的是一种将 (x, y) 屏幕坐标转换为 Google Maps LatLng 对象的方法.

I am implementing an application using Google Maps and Leap Motion and what I want right now, and I am a bit stuck, is a way to convert (x, y) screen coordinates into a Google Maps LatLng object.

我想实现这一点，例如，在用户使用 Leap Motion 指向的点处开始全景(街景).

I want to achieve this in order to start, for example, a panorama (Street View) at the point where the user is pointing with the Leap Motion.

我知道 fromPointToLatLng 函数的存在，但我不知道使用它的正确方法是什么，以及如何将我的 x 和 y 坐标转换为 lat lng 变量.

I know about the presence of fromPointToLatLng function, but I have no clue what is the right approach in using it and how can I translate my x and y coordinates into lat lng variables.

你能帮我解决这个问题吗?

Can you please help me with this?

推荐答案

经过一些研究和一些失败后，我想出了一个解决方案.按照这个 link 中的文档，我发现 google Points 是在 x 的范围内计算的:[0-256], y:[0-256](图块大小为 256x256 像素)，(0,0) 点是地图的最左侧点(查看链接了解更多信息).

After some research and some fails I came up with a solution. Following the documentation from this link I found out that the google Points are computed in the range of x:[0-256], y:[0-256] (a tile being 256x256 pixels) and the (0,0) point being the leftmost point of the map (check the link for more information).

不过，我的做法是这样的:

However, my approach is as it follows:

• 有 x 和 y 坐标(它们是屏幕上的坐标 - 在地图上)我计算了 x 和 y 坐标被放置以响应包含地图的 div 的百分比(在我的情况下，孔窗)

• having the x and y coordinates (which are coordinates on the screen - on the map) I computed the percentage where the x and y coordinates were placed in response to the div containing the map (in my case, the hole window)

计算(可见)地图的东北和西南纬度边界

computed the NortEast and SouthWest LatLng bounds of the (visible) map

转换谷歌积分中的边界

借助 x 和 y 的边界和百分比，在 google 点中计算新的 lat 和 lng

computed the new lat and lng, in google points, with the help of the boundaries and percentage of x and y

转换回经纬度

  // retrieve the lat lng for the far extremities of the (visible) map
  var latLngBounds = map.getBounds();
  var neBound = latLngBounds.getNorthEast();
  var swBound = latLngBounds.getSouthWest();

  // convert the bounds in pixels
  var neBoundInPx = map.getProjection().fromLatLngToPoint(neBound);
  var swBoundInPx = map.getProjection().fromLatLngToPoint(swBound);

  // compute the percent of x and y coordinates related to the div containing the map; in my case the screen
  var procX = x/window.innerWidth;
  var procY = y/window.innerHeight;

  // compute new coordinates in pixels for lat and lng;
  // for lng : subtract from the right edge of the container the left edge, 
  // multiply it by the percentage where the x coordinate was on the screen
  // related to the container in which the map is placed and add back the left boundary
  // you should now have the Lng coordinate in pixels
  // do the same for lat
  var newLngInPx = (neBoundInPx.x - swBoundInPx.x) * procX + swBoundInPx.x;
  var newLatInPx = (swBoundInPx.y - neBoundInPx.y) * procY + neBoundInPx.y;

  // convert from google point in lat lng and have fun :)
  var newLatLng = map.getProjection().fromPointToLatLng(new google.maps.Point(newLngInPx, newLatInPx));

希望这个解决方案也能帮助别人！:)

Hope this solution will help someone out also! :)

这篇关于如何从 (x, y) 屏幕坐标转换为 LatLng(谷歌地图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！