Comment décaler le point central dans Google maps api V3

Question

J'ai une Google map avec une demi-panneau transparent couvrant une partie de la zone. Je voudrais ajuster le point central de la carte pour prendre en compte la partie de la carte qui est partiellement occulté. Voir l'image ci-dessous. Idéalement, lorsque le réticule et les broches sont placées au centre de la carte.

J'espère qu'un sens.

La raison en est simple: Lorsque vous effectuez un zoom avant il a besoin pour centrer la carte sur la croix plutôt qu'à 50% de 50%. Aussi, je vais être le traçage des repères sur la carte et se déplaçant à travers eux dans l'ordre. Lorsque la carte se centre sur eux, ils ont aussi besoin d'être à la position de décalage.

Merci à l'avance!

Answer 1

Ce n'est pas particulièrement difficile une fois que vous trouvez pertinents de la réponse précédente.

Vous avez besoin de convertir au centre de la carte de son monde, coordonnées, de trouver l'endroit où la carte doit être centré pour mettre l' apparente centre où vous le souhaitez, et re-centrer la carte à l'aide de la véritable centre.

L'API sera toujours au centre de la carte sur le centre de la fenêtre d'affichage, de sorte que vous devez être prudent si vous utilisez map.getCenter() qu'il sera de retour le véritable centre, pas le centre évident. Je suppose qu'il serait possible de surcharger l'API de sorte que son getCenter() et setCenter() méthodes sont remplacés, mais je n'ai pas fait que.

Le Code ci-dessous. Exemple en ligne. Dans l'exemple, en cliquant sur le bouton déplace le centre de la carte (il y a une jonction de route de là) en bas de 100px de gauche et de 200px.

function offsetCenter(latlng,offsetx,offsety) {

// latlng is the apparent centre-point
// offsetx is the distance you want that point to move to the right, in pixels
// offsety is the distance you want that point to move upwards, in pixels
// offset can be negative
// offsetx and offsety are both optional

var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);

var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)

var worldCoordinateNewCenter = new google.maps.Point(
    worldCoordinateCenter.x - pixelOffset.x,
    worldCoordinateCenter.y + pixelOffset.y
);

var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

map.setCenter(newCenter);

}

Answer 2

Jetez aussi un oeil à la panBy(x:nombre, y:number) de la fonction sur les cartes de l'objet.

La documentation mentionne ceci à propos de la fonction:

Changements au centre de la carte par la distance donnée en pixels. Si la distance est inférieure à la largeur et la hauteur de la carte, la transition sera très bien animés. Notez que le système de coordonnées augmente d'ouest en est (pour les valeurs de x) et du nord au sud (pour les valeurs de y).

Juste l'utiliser comme ceci:

mapsObject.panBy(200, 100)

Answer 3

Andrew est la réponse. Cependant, dans mon cas, map.getBounds () renvoyait indéfiniment. Je l'ai corrigé en attendant l'événement bounds_changed, puis j'ai appelé la fonction pour décaler le centre. Ainsi:

 var center_moved = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
  if(!center_moved){
    offsetCenter(map.getCenter(), 250, -200);
    center_moved = true; 
  }
});
 

Answer 4

Une autre approche pour compenser un itinéraire ou un groupe de marqueurs peut être trouvée ici:

http://stackoverflow.com/a/26192440/1238965

Il utilise toujours la méthode fromLatLngToPoint() décrite dans la réponse de @Andrew Leach.