如何将(x,y)屏幕坐标转换为LatLng(谷歌地图)

时间:2014-08-09 14:02:41

标签: javascript google-maps google-maps-api-3

我正在使用谷歌地图和Leap Motion实现一个应用程序,我现在想要的,我有点卡住,是一种将(x,y)屏幕坐标转换为Google Maps LatLng对象的方法。

我想实现这一目标,例如,在用户使用Leap Motion指向的位置启动全景(街景视图)。

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

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

6 个答案:

答案 0 :(得分:29)

function latLng2Point(latLng, map) {
  var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
  var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
  var scale = Math.pow(2, map.getZoom());
  var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
  return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
}

function point2LatLng(point, map) {
  var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
  var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
  var scale = Math.pow(2, map.getZoom());
  var worldPoint = new google.maps.Point(point.x / scale + bottomLeft.x, point.y / scale + topRight.y);
  return map.getProjection().fromPointToLatLng(worldPoint);
}

答案 1 :(得分:9)

经过一些研究,有些研究失败了,我想出了一个解决方案。 根据此link的文档,我发现Google点数的计算范围为x:[0-256],y:[0-256](图块为256x256像素)和(0, 0)指向地图的最左侧点(查看链接以获取更多信息)。

但是,我的方法如下:

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

  • 计算(可见)地图的NortEast和SouthWest LatLng边界

  • 转换了Google点数中的界限

  • 借助边界和x和y的百分比计算谷歌中的新lat和lng

  • 转换回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));
    

希望这个解决方案也可以帮助别人! :)

答案 2 :(得分:5)

查看简易解决方案(v3):

map.getProjection().fromLatLngToPoint(marker.position);

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Projection

答案 3 :(得分:2)

基于现有的SO问题代码添加替代解决方案,尽管原始海报找到了解决方案。

Based on this answer我们可以找到Google Maps API v3进行转换的必要部分。它侧重于重新定位地图的中心。修改它以从屏幕读取位置需要计算屏幕中心与屏幕中心的差异。

我为了这个例子而将函数重命名为pixelOffsetToLatLng并将其更改为返回位置(除此之外,与上面答案中的代码没有太大区别):

function pixelOffsetToLatLng(offsetx,offsety) {
  var latlng = map.getCenter();
  var scale = Math.pow(2, map.getZoom());
  var nw = new google.maps.LatLng(
      map.getBounds().getNorthEast().lat(),
      map.getBounds().getSouthWest().lng()
  );

  var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
  var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);

  var worldCoordinateNewCenter = new google.maps.Point(
      worldCoordinateCenter.x - pixelOffset.x,
      worldCoordinateCenter.y + pixelOffset.y
  );

  var latLngPosition = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

  return latLngPosition;
}

要调用它,您需要传递网页元素上的X和Y坐标:

  var x = mapElement.offsetWidth / 2 - screenPositionX;
  var y = screenPositionY - mapElement.offsetHeight / 2;
  pixelOffsetToLatLng(x,y);

对于leap.js方面,你只需要通过试验或使用如下工作的屏幕位置插件将leap.js坐标映射到网页:

var $handCursor = $('#hand-cursor'); // using jQuery here, not mandatory though

Leap.loop(function(frame) {
  if (frame.hands.length > 0) {
    var hand = frame.hands[0];
    $handCursor.css({
      left: hand.screenPosition()[0] + 'px',
      top: hand.screenPosition()[1] + 'px'
    });

    if ((hand.grabStrength >= 0.6 && lastGrabStrength < 0.6)) {
      var x = mapElement.offsetWidth / 2 - hand.screenPosition()[0];
      var y = hand.screenPosition()[1] - mapElement.offsetHeight / 2;
      map.setCenter(pixelOffsetToLatLng(x, y));
    }
  }
}).use('screenPosition', {
  scale: 0.5
});

这是关于如何在2D环境中使用Leap.js读取坐标的Codepen示例: http://codepen.io/raimo/pen/pKIko

您可以使用鼠标或将手放在Leap Motion控制器上来居中使用Google地图视图(请参阅红色“光标”以获取视觉提示)。

答案 4 :(得分:0)

显然,Google已决定让生活更轻松。

这是内置的解决方案:

Point point = googleMap.getProjection.toScreenLocation(latLng)

LatLng latlng = googleMap.getProjection.fromScreenLocation(point)

答案 5 :(得分:-2)

您需要知道地图中心的(x0,y0),地图中心的(lat0,lng0)以及每个像素的度数r,与地图的缩放级别相对应。然后

lat(y) = lat0 + r(y-y0)
lng(x) = lng0 + r(x-x0) 

请注意,这是一个简化的线性化模型,适用于显示小区域的地图。