API Карт Google V3: смещение panTo() по пикселям x

У меня есть некоторые элементы пользовательского интерфейса справа от моей карты (иногда), и я хотел бы компенсировать мои вызовы panTo() (иногда).

Итак, я подумал:

  • получить исходный latlng
  • преобразуйте его в пиксели экрана.
  • добавить смещение
  • преобразуйте его обратно в latlng.

Но я должен неправильно понять, что API Карт Google называет "Point Plane": 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);
            }

Ответы

Ответ 1

Здесь более простая версия решения Эшли:

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() с дополнительными параметрами для смещений. Это использует методы fromLatLngToContainerPixel() и fromContainerPixelToLatLng() класса MapCanvasProjecton. Этот объект не имеет никакого конструктора и должен быть получен из метода getProjection() класса OverlayView; класс OverlayView используется для создания пользовательских оверлеев путем реализации его интерфейса, но здесь мы просто используем его напрямую. Потому что getProjection() доступен только после вызова onAdd(). Метод draw() вызывается после onAdd() и определяется для нашего экземпляра OverlayView как функция, которая ничего не делает. В противном случае это приведет к ошибке.

Ответ 2

Ответа на этот вопрос Dean выглядит намного чище, как сказано в некоторых комментариях, но выглядел немного сложнее для меня. Это однолинейное решение выглядит более элегантно для меня.

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

Сначала установите центр карты. Затем panyBy сдвинет центр в направлении (x, y). Чем больше отрицательных x, карта сдвинется вправо. Чем больше отрицательных y, карта сдвинется вниз.

Ответ 3

Хорошо, я нашел ответ здесь: Как позвонить изLatLngToDivPixel в 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);
}