Cómo compensar el punto central en Google maps api V3

Question 1

Tengo un mapa de Google con un panel semitransparente que cubre una parte del área. Me gustaría ajustar el punto central del mapa para tener en cuenta la parte del mapa que está parcialmente oscurecida. Vea la imagen a continuación. Idealmente, el lugar donde se colocan la cruz y el marcador sería el punto central del mapa.

Espero que tenga sentido.

La razón es simple: cuando hace zoom, necesita centrar el mapa sobre la cruz en lugar de al 50% 50%. Además, trazaré marcadores en el mapa y me moveré a través de ellos en secuencia. Cuando el mapa se centra en ellos, también deben estar en la posición de desplazamiento.

¡Gracias por adelantado!

Maqueta del mapa que estoy construyendo

Question 2

Esto no es particularmente difícil una vez que encuentras la respuesta anterior relevante.

Debe convertir el centro del mapa a sus coordenadas mundiales, encontrar dónde debe centrarse el mapa para colocar el aparente centre donde lo desee y vuelva a centrar el mapa con el botón verdadero centrar.

La API siempre centrará el mapa en el centro de la ventana gráfica, por lo que debe tener cuidado si usa map.getCenter() ya que devolverá el centro real, no el centro aparente. Supongo que sería posible sobrecargar la API para que su getCenter() y setCenter() los métodos se reemplazan, pero no lo he hecho.

Código a continuación. Ejemplo en línea. En el ejemplo, hacer clic en el botón desplaza el centro del mapa (hay un cruce de carreteras allí) 100 px hacia abajo y 200 px hacia la izquierda.

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

}

Question 3

También eche un vistazo a la función panBy(x:number, y:number) en el objeto de mapas.

La documentación menciona esto sobre la función:

Cambia el centro del mapa por la distancia dada en píxeles. Si la distancia es menor que el ancho y el alto del mapa, la transición se animará suavemente. Tenga en cuenta que el sistema de coordenadas del mapa aumenta de oeste a este (para valores de x) y de norte a sur (para valores de y).

Solo úsalo así:

mapsObject.panBy(200, 100)

Question 4

Aquí hay un ejemplo de cómo resolver el problema usando panBy() método de la API de mapas: http://jsfiddle.net/upsidown/2wej9smf/

Question 5

Acabo de encontrar otra solución más simple. En caso de que esté utilizando el método fitBounds, puede pasarle un segundo argumento opcional. Este argumento es relleno, que se considerará al ajustar los límites.

// pass single side:
map.fitBounds(bounds, { left: 1000 })

// OR use Number:
map.fitBounds(bounds, 20)

Otras lecturas: documentos oficiales.

Question 6

Aquí hay un método más simple que podría ser más útil en el diseño receptivo, ya que puede usar porcentajes en lugar de píxeles. ¡Sin coordenadas mundiales, sin LatLngs a Points!

var center;  // a latLng
var offsetX = 0.25; // move center one quarter map width left
var offsetY = 0.25; // move center one quarter map height down

var span = map.getBounds().toSpan(); // a latLng - # of deg map spans

var newCenter = { 
    lat: center.lat() + span.lat()*offsetY,
    lng: center.lng() + span.lng()*offsetX
};

map.panTo(newCenter);  // or map.setCenter(newCenter);

Question 7

Andrew es la respuesta. Sin embargo, en mi caso, map.getBounds() seguía regresando indefinido. Lo arreglé esperando el eventobounds_changed y entonces llamar a la función para desplazar el centro. Al igual que:

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

Question 8

Vieja pregunta, lo sé. Pero, ¿qué tal una forma más centrada en CSS?

http://codepen.io/eddyblair/pen/VjpNQQ

Lo que hice fue:

Envuelva el mapa y la superposición en un contenedor con overflow: hidden
Superpuesto a la superposición con position: absolute
Extendió el mapa ancho aparente por el ancho de superposición (más cualquier relleno y desplazamiento) estableciendo un valor negativo margin-left.
Entonces para cumplir con https://www.google.com/permissions/geoguidelines/attr-guide.html posicionado los widgets y atribución divs.

De esta forma, el centro del mapa queda alineado con el centro del área deseada. El js es solo un mapa estándar js.

Reposicionar los íconos para street-view es un ejercicio para el lector 🙂

Si desea la superposición a la izquierda, simplemente cambie la línea 24 margin-left a margin-right y linea 32 right a left.

¿Ha sido útil esta solución?