Google Maps API V3: смещение panTo () на x пикселей

Question

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

Итак, я решил:

1. получить исходное значение latlng
2. преобразовать его в пиксели экрана
3. добавить смещение
4. преобразовать его обратно в значение latlng.

НоЯ должен неправильно понять, что API Карт Google называется «Точка»: http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

Вот мой код, который, кажется, смещен на широту:

            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

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

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 как функция, которая ничего не делает. В противном случае это приведет к ошибке.

Answer 2

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

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

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

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