Google Maps API V3：以x像素偏移panTo（） [英] Google Maps API V3: Offset panTo() by x pixels

问题描述

我的地图右侧有一些UI元素（有时候），我想抵消我的panTo（）调用（有时）。

所以我想：
$ b

1. 获取原始的latlng


2. 将其转换为屏幕像素


3. 添加抵消


4. 将其转换回latlng。
   

但我必须误解Google Maps API称为Point Plane：
http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

这里是我的代码似乎抵消了lat-long：
$ b $ pre-class = $ b var PIXEL_OFFSET = 100;
var aPoint = me.gmap.getProjection（）。fromLatLngToPoint（alatlng）;
aPoint.x = aPoint.x + OFFSET;
返回me.gmap.getProjection（）。fromPointToLatLng（aPoint）;

解决方案

这里有一个简单版本的Ashley's解决方案：

  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，
中心：latlng 
}）; 
 
 setTimeout（function（）{map.panToWithOffset（latlng，0，150）;}，1000）; 
  

这是一个可以工作的示例。

让我详细解释一下。这扩展了Map对象本身。所以你可以像使用额外的偏移参数一样使用它，就像 panTo（）一样。它使用来自方法的和。 google.com/maps/documentation/javascript/reference#MapCanvasProjectionrel =noreferrer> MapCanvasProjecton 类。此对象没有构造器，必须从 getProjection（）方法获得。 javascript / reference＃OverlayViewrel =noreferrer> OverlayView class; OverlayView类用于通过实现其接口来创建自定义叠加层，但我们直接使用它。因为 getProjection（）仅在调用 onAdd（）后才可用。在 onAdd（）之后调用 draw（）方法，并将OverlayView的实例定义为一个函数什么也没做。否则会导致错误。

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

So I figured:

1. get the original latlng
2. convert it to screen pixels
3. add an offset
4. convert it back to latlng.

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

解决方案

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

Here is a working example.

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：以x像素偏移panTo（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！