Google Maps API V3:将 panTo() 偏移 x 像素 [英] Google Maps API V3: Offset panTo() by x pixels

问题描述

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

I have a some UI elements on the right of my map (sometimes), and I'd like to offset my panTo() calls (sometimes).

所以我想:

1. 获取原始纬度
2. 将其转换为屏幕像素
3. 添加偏移量
4. 将其转换回纬度.

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

But I must misunderstand what Google Maps API refers to as the "Point Plane": http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

这是我的代码，似乎被经纬度抵消了:

Here is my code that seems to offset by 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);
            }

推荐答案

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

Here's a simpler version of Ashley's solution:

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); 
};

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

You can then use it like 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 类.此对象没有构造函数，必须从 getProjection() 方法中获取rel="noreferrer">OverlayView 类；OverlayView 类用于通过实现其接口来创建自定义叠加层，但这里我们只是直接使用它.因为 getProjection() 只有在 onAdd() 被调用后才可用.draw() 方法在 onAdd() 之后被调用，并且被定义为我们的 OverlayView 实例是一个什么都不做的函数.否则会导致错误.

Let me explain in detail. This extends the Map object itself. So you can use it just like panTo() with extra parameters for offsets. This uses the fromLatLngToContainerPixel() and fromContainerPixelToLatLng() methods of the MapCanvasProjecton class. This object has no contructor and has to be gotten from the getProjection() method of the OverlayView class; the OverlayView class is used for the creation of custom overlays by implementing its interface, but here we just use it directly. Because getProjection() is only available after onAdd() has been called. The draw() method is called after onAdd() and is defined for our instance of OverlayView to be a function that does nothing. Not doing so will otherwise cause an error.

这篇关于Google Maps API V3:将 panTo() 偏移 x 像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！