Comment décaler le centre d'une Google maps (API v3) en pixels?

Question

Je me demandais s'il était possible de décaler le centre d'une carte dans Google maps api v3. Je voudrais contrôler ce décalage en pixels , car par lat et lng semble faux et très difficile à prévoir.

J'ai juste besoin de placer un marqueur, puis de décaler le centre de 250 pixels pour pouvoir placer un autre contenu au milieu de la carte.

J'espère que quelqu'un pourra vous aider!

Answer 1

J'ai trouvé cette question lors de mes recherches et pensé que je devrais fournir une réponse:

 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 votre variable Google Maps n'est pas map utilisez la référence de fonction d'appel suivante:

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

Answer 2

Reportez-vous à cette question: Comment compenser le centre d'une carte Google maps API v3) en pixels?

C'est une modification de la réponse, je fournis ici.

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

Vous pouvez ensuite l'utiliser comme ceci:

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

Ici est un exemple.

Answer 3

il y a aussi la méthode panBy de l'objet de carte ... vous pouvez compenser par un nombre spécifié de pixels. Cependant, vous obtiendrez une animation de transition en douceur, qui peut ne pas être ce que vous vouliez. Je cherche la même chose moi-même, je vous ferai savoir ce que je trouve.

Answer 4

Jetez un œil à l'objet MapCanvasProjection - http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

Vous pouvez obtenir le centre de la carte latLng (map.getCenter ()) puis le convertir en coordonnées de pixel du conteneur avec fromContainerPixeltoLatLng ()