Как компенсировать центр карт Google (API v3) в пикселях?

Мне было интересно, возможно ли смещать центр карты в Google maps api v3. Я хотел бы контролировать это смещение в пикселях, так как lat и lng кажутся неправильными и очень трудными для прогнозирования.

Мне просто нужно поместить маркер, а затем смещать центр на 250 пикселей, чтобы я мог разместить другой контент в середине карты.

Надеюсь, кто-то может помочь!

Ответы

Ответ 1

Нашел этот вопрос, исследуя и думая, я должен дать ответ:

function map_recenter(latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
    );  
    map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

Если ваша переменная Google maps не соответствует map, используйте следующую ссылку функции вызова:

function map_recenter(map,latlng,offsetx,offsety) { ...

Ответ 2

Обратитесь к этому вопросу: Как компенсировать центр карт Google (API v3) в пикселях?

Это модификация ответа, который я предоставил здесь.

google.maps.Map.prototype.setCenterWithOffset= 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.setCenter(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
});

map.setCenterWithOffset(latlng, 0, 250);

Вот рабочий пример.

Ответ 3

Посмотрите на объект MapCanvasProjection - http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

Вы можете получить центр map latLng (map.getCenter()), а затем преобразовать его в координаты пикселя контейнера с помощью методаContainerPixeltoLatLng()

Ответ 4

существует также метод panBy объекта карты... вы можете компенсировать указанное количество пикселей. Однако вы получите плавную анимацию перехода, которая может быть не такой, какой вы хотели. Я тоже ищу то же самое, дам вам знать, что я нахожу.