在google.maps.Point中转换(x,y)像素坐标

时间:2014-08-11 19:30:33

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

我试图根据我的x,y像素坐标(当然还有地图选项,如缩放和中心)来找出LatLng。

为了做到这一点,我发布了另一个question,有人想出了这个解决方案,来自post

/**
* @param {google.maps.Map} map
* @param {google.maps.Point} point
* @param {int} z
* @return {google.maps.LatLng}
*/
var pointToLatlng = function(map, point, z){
    var scale = Math.pow(2, z);
    var normalizedPoint = new google.maps.Point(point.x / scale, point.y / scale);
    var latlng = map.getProjection().fromPointToLatLng(normalizedPoint);
    return latlng; 
};

从代码示例中可以看出,该函数使用google.maps.Point作为参数,因此我需要将我的屏幕像素坐标转换为google.maps.Point,我不知道如何,因为他们的文档这个API并不是很冗长......

你能帮帮我吗?或者我在途中错过了一些东西?

2 个答案:

答案 0 :(得分:2)

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

但是,我的方法如下:

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

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

  • 转换了Google点数中的界限

  • 借助边界和x和y的百分比计算谷歌中的新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;
      var finalResult = new google.maps.Point(newLngInPx, newLatInPx);
    

答案 1 :(得分:0)

你可以使用一个不抽取任何内容的叠加层,以获得超值的功能,fromContainerPixelToLatLng()

var overlay = new google.maps.OverlayView();
overlay.draw = function() {}; // empty function required
overlay.setMap(map);

var coordinates = overlay.getProjection().fromContainerPixelToLatLng(
    new google.maps.Point(x, y)
);

console.log(coordinates.lat + ", " + coordinates.lng);