Question

我的地图右侧有一些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()一样使用它，并使用额外的偏移参数。这使用MapCanvasProjecton类的fromLatLngToContainerPixel()和fromContainerPixelToLatLng()方法。此对象没有构造函数，必须从OverlayView类的getProjection()方法获取; OverlayView类通过实现其界面用于创建自定义叠加层，但在这里我们只是直接使用它。因为getProjection()仅在调用onAdd()后才可用。 draw()方法在onAdd()之后调用，并且为我们的OverlayView实例定义为不执行任何操作的函数。不这样做会导致错误。

Answer 2

在一些评论中，Dean的回答看起来更干净，但对我来说看起来有点复杂。这个单线解决方案看起来更优雅。

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

首先设置地图中心。然后panyBy将在（x，y）方向上移动中心。 x越负，地图就会向右移动。 y越负，地图就会向下移动。

Answer 3

好的，我在这里找到答案：How to call fromLatLngToDivPixel in Google Maps API V3?

首先创建函数/原型来访问地图的投影（在V3中很难）

//declare function/prototpe
function CanvasProjectionOverlay() {}
//define..
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};

var gmap;
var canvasProjectionOverlay;
var PIXEL_OFFSET= 100;

function showUluru(isOffset=false){
    //create map
    var gmap = new google.maps.Map($('#map_canvas', {});
    //create projection
    canvasProjectionOverlay = new CanvasProjectionOverlay();
    canvasProjectionOverlay.setMap(gmap);
    var uluruRock = new google.maps.LatLng(-25.335448,135.745076);

    if (isOffset)
            uluruRock  = getCentreOffset(uluruRock);

    gmap.panTo( uluruRock )
}


//Use this function on LatLng you want to PanTo();
function getCentreOffset( alatlng ) {
    var proj = canvasProjectionOverlay.getProjection();
    var aPoint = proj.fromLatLngToContainerPixel(alatlng);
    aPoint.x=aPoint.x+PIXEL_OFFSET;
    return proj.fromContainerPixelToLatLng(aPoint);
}

Google Maps API V3：按x像素偏移panTo（）

3 个答案: