如何将 LatLng 转换为 (x , y) 像素，反之亦然？答案

【问题标题】：How to convert LatLng to (x , y) pixels and vice versa?如何将 LatLng 转换为 (x , y) 像素，反之亦然？
【发布时间】：2012-08-09 09:32:36
【问题描述】：

我正在使用谷歌地图 API V3，我想在用户点击地图时创建一个可编辑的 100 像素 X 100 像素矩形。

现在我只需要用户点击的 (x,y) 点，然后是 (x+100, y+100) 的 lat 和 lng。任何的想法？

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

此函数应围绕您传递给它的中心 (LatLng) 创建一个 100 x100 矩形。

function setRectangle(center){
    var scale = Math.pow(2,map.getZoom());
    var proj = map.getProjection();
    var wc = proj.fromLatLngToPoint(center);
    var bounds = new google.maps.LatLngBounds();
    var sw = new google.maps.Point(((wc.x * scale) - 50)/ scale, ((wc.y * scale) - 50)/ scale);
    bounds.extend(proj.fromPointToLatLng(sw));
    var ne = new google.maps.Point(((wc.x * scale) + 50)/ scale, ((wc.y * scale) + 50)/ scale);
    bounds.extend(proj.fromPointToLatLng(ne));
    var opts = {
        bounds: bounds,
        map: map,
        editable:true
    }
    var rect = new google.maps.Rectangle(opts);

}

【讨论】：

你也可以用Math.pow(2,map.getZoom())代替1 << map.getZoom()
你可以使用((wc.x * scale) - 50)/ scale而不是wc.x - 50/scale

【解决方案2】：

你可以使用

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

var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

现在您可以从 p.x 和 p.y 获取像素

【讨论】：

尽管这看起来很有希望，但它有一个主要缺点（从 Google Maps v3.16 开始）：由overlay.getProjection() 返回的投影只有在重绘覆盖时才会更新。这意味着，如果您平移/缩放地图，您将无法使用投影，直到下一次绘制。