google maps - tutorial - ¿Cómo se compensa el centro de un mapa de Google(API v3) en píxeles?

google.maps.marker example

Question

Me preguntaba si es posible compensar el centro de un mapa en Google maps api v3. Me gustaría controlar esta compensación en píxeles , ya que lat y lng parecen incorrectos y muy difíciles de predecir.

Solo necesito colocar un marcador, y luego compensar el centro por 250px para poder colocar otro contenido en el medio del mapa.

¡Espero que alguien pueda ayudar!

Answer 1

Consulte esta pregunta: ¿Cómo se compensa el centro de un mapa de Google (API v3) en píxeles?

Esta es una modificación de una respuesta que proporcioné here .

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

Entonces puedes usarlo así:

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

Aquí hay un example trabajo.

Answer 2

Eche un vistazo al objeto MapCanvasProjection - http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

Puede obtener el centro del mapa latLng (map.getCenter ()) y luego convertirlo a las coordenadas del contenedor de píxeles con fromContainerPixeltoLatLng ()

Answer 3

Encontré esta pregunta al investigar y pensé que debería dar una respuesta:

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

Si su variable de mapas de Google no es un map use la siguiente referencia de función de llamada:

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

Answer 4

también está el método panBy del objeto de mapa ... puede compensarlo por un número específico de píxeles. Sin embargo, obtendrá una animación de transición suave, que puede no ser la que usted quería. Estoy buscando lo mismo, te dejaré saber lo que encuentro.