如何将（x，y）屏幕坐标转换为LatLng（Google Maps） [英] How to convert from (x, y) screen coordinates to LatLng (Google Maps)

问题描述

我正在使用Google Maps和Leap Motion来实现一个应用程序，并且我现在想要的是，而且我有点卡住了，它是将（x，y）屏幕坐标转换为Google Maps LatLng对象的一种方式。

我想要实现这一点，以便在用户使用Leap Motion指向的位置启动全景（街景视图）。

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

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

解决方案

经过一些研究和一些失败后，我想出了一个解决方案。
根据此链接中的文档，我发现Google点数是在x的范围为[0-256]，y为[0-256]（一个图块为256x256像素），（0,0）点为地图最左边的点（查看链接以获取更多信息） / p>

然而，我的方法如下：

• x和y坐标（这是屏幕上的坐标 - 在地图上）我计算了放置x和y坐标以响应包含地图的div的百分比（在我的情况下，是空洞窗口）




• 计算了（可见）地图的NortEast和SouthWest LatLng边界

b $ b



• 通过x和y的边界和百分比帮助计算出新的经纬度和谷歌点数。 b $ b

• 转换回lat lng

    //检索（可见）映射的远端的经纬度
   var latLngBounds = map.getBounds（）; 
   var neBound = latLngBounds.getNorthEast（）; 
   var swBound = latLngBounds.getSouthWest（）; 
   
   //以像素为单位转换边界
   var neBoundInPx = map.getProjection（）。fromLatLngToPoint（neBound）; 
   var swBoundInPx = map.getProjection（）。fromLatLngToPoint（swBound）; 
   
   //计算与包含地图的div相关的x和y坐标的百分比;在我的情况下，屏幕
   var procX = x / window.innerWidth; 
   var procY = y / window.innerHeight; 
   
   //为lat和lng计算像素的新坐标; 
   //对于lng：从容器的右边缘减去左边缘
   //将其乘以屏幕上x坐标的百分比
   //与容器相关在其中放置地图并添加左边界
   //您现在应该具有以像素为单位的Lng坐标
   //对lat 
  做同样的操作var newLngInPx =（neBoundInPx.x  - swBoundInPx.x）* procX + swBoundInPx.x; 
   var newLatInPx =（swBoundInPx.y  -  neBoundInPx.y）* procY + neBoundInPx.y; 
   
   //从google lng转换为google lng，玩得开心:) 
   var newLatLng = map.getProjection（）。fromPointToLatLng（new google.maps.Point（newLngInPx，newLatInPx））; 
    

希望这个解决方案也能帮助别人！ ：）

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.

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.

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?

解决方案

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:

• 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

• converted the bounds in google Points

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

• converted back to lat lng

    // 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（Google Maps）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！