google-maps-api-3 - 谷歌地图 API V3 : Offset panTo() by x pixels

Question

我的 map 右侧有一些 UI 元素(有时)，我想抵消我的 panTo() 调用(有时)。

所以我想:

获取原始 latlng

将其转换为屏幕像素

添加偏移量

将其转换回 latlng。

但我必须误解 Google Maps API 所指的“点平面”:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

这是我的代码，似乎被 lat-long 抵消了:

            function getCentreOffset( alatlng ) {
                    var PIXEL_OFFSET= 100; 
                    var aPoint = me.gmap.getProjection().fromLatLngToPoint(alatlng);
                    aPoint.x=aPoint.x + OFFSET;
                    return me.gmap.getProjection().fromPointToLatLng(aPoint);
            }

Answer 1

这是 Ashley 解决方案的更简单版本:

google.maps.Map.prototype.panToWithOffset = function(latlng, offsetX, offsetY) {
    var map = this;
    var ov = new google.maps.OverlayView();
    ov.onAdd = function() {
        var proj = this.getProjection();
        var aPoint = proj.fromLatLngToContainerPixel(latlng);
        aPoint.x = aPoint.x+offsetX;
        aPoint.y = aPoint.y+offsetY;
        map.panTo(proj.fromContainerPixelToLatLng(aPoint));
    }; 
    ov.draw = function() {}; 
    ov.setMap(this); 
};

然后你可以像这样使用它:

var latlng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlng
});

setTimeout(function() { map.panToWithOffset(latlng, 0, 150); }, 1000);

这是一个有效的 example .

让我详细解释一下。这扩展了 Map 对象本身。所以你可以像 panTo() 一样使用它带有额外的偏移参数。这使用 fromLatLngToContainerPixel()和 fromContainerPixelToLatLng() MapCanvasProjecton 的方法类(class)。该对象没有构造函数，必须从 getProjection() 获取。 OverlayView 的方法类(class); OverlayView 类用于通过实现其接口(interface)来创建自定义叠加层，但这里我们直接使用它。因为 getProjection()仅在 onAdd() 之后可用已被调用。 draw()方法在 onAdd() 之后调用并且为我们的 OverlayView 实例定义为一个什么都不做的函数。否则将导致错误。