Google Maps API V3:按x像素偏移panTo()

Question

我的地图右侧有一些UI元素(有时),我想偏移我的panTo()调用(有时).

所以我想:

1. 得到原来的latlng
2. 将其转换为屏幕像素
3. 添加偏移量
4. 将其转换回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);

这是一个有效的例子.

让我详细解释一下.这扩展了Map对象本身.因此您可以像panTo()使用额外的偏移参数一样使用它.这使用了MapCanvasProjecton类的fromLatLngToContainerPixel()和fromContainerPixelToLatLng()方法.这个对象没有构造函数,必须从OverlayView类的方法中获取; OverlayView类用于通过实现其界面来创建自定义叠加层,但在这里我们只是直接使用它.因为只有在被叫之后才可用.该方法在之后调用,并且为我们的OverlayView实例定义为不执行任何操作的函数.不这样做会导致错误.getProjection()getProjection()onAdd()draw()onAdd()

Answer 2

正如一些评论中所说，Dean 的回答看起来更清晰，但对我来说看起来有点复杂。这个单行解决方案对我来说看起来更优雅。

var map = $('#map_canvas').gmap3("get")
map.panBy(-500,-500); // (x,y)

首先设置地图的中心。然后 panyBy 将在 (x,y) 方向移动中心。x 越负，地图将向右移动。y 越负，地图将向下移动。