web-dev-qa-db-fra.com

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

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!

google-mapsgoogle-maps-api-3
38
Landitus

J'ai trouvé cette question lors de mes recherches et j'ai 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) { ...
60
iambriansreed

Référez-vous à cette question: Comment décaler le centre d'une Google maps (API v3) en pixels?

Ceci est une modification d'une réponse que j'ai fournie 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 alors simplement 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);

Voici un fonctionnement exemple .

24
Dean Or

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 pixels du conteneur avec fromContainerPixeltoLatLng ()

4
skarE

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.

3
Chris4d