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

7 minutos de lectura

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

  • Vas a tener que aclarar tu pregunta. ¿Qué significa “tener en cuenta la parte del mapa que está parcialmente oscurecida”? ¿Y qué significa “en lugar de 50% 50%”? Quiere ayudar, pero no puede entender lo que está tratando de lograr.

    – Sean Mickey

    18 mayo, 2012 a las 18:25

  • Hola, ¿puede dar la URL del ejemplo de trabajo porque necesito ayuda para crear una línea de estrategia móvil junto con la línea de ruta?

    –SP Singh

    06 abr.

Como compensar el punto central en Google maps api V3
andres leach

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

}

  • ¿Es posible hacer que este código se active cuando se carga la página para que el mapa se muestre como desplazado cuando se ve por primera vez?

    – Darren Cook

    01 jun.

  • @DarrenCook: Por supuesto. Solo usa esto en lugar de map.setCenter(). Todo lo que hace este código es volver a calcular lo que se le dice al mapa que haga, y luego hace lo suyo. map.setCenter().

    – Andrew Leach

    01 jun.

  • Gracias Andrew, en mi código tomé addMarkerFromAdress(latLng, title) y lo reemplacé con la función offsetCenter(latlng,offsetx,offsety) y todo sigue funcionando, pero ¿cómo obtengo el valor de offsety (243px) en la función?

    – Darren Cook

    01 jun.


  • mejor uso map.panBy(250, 0);

    – Alejandro Shvetsov

    29 oct.

  • Descubrí que el nw Este script nunca usa var y, al menos en mi caso de uso, podría eliminarse sin ningún problema. Sin embargo, no probé esto solo, ya que tengo un montón de otros métodos que ya establecen los límites y todo eso.

    – hellatán

    01 dic.

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)

  • ¿Alguien sabe de una manera de deshabilitar la animación para este método siempre?

    – Ceniza

    10 dic. 13 en 13:22

  • Esta debe ser la respuesta. Funcionó perfectamente y muy fácil. Gracias.

    – Desarrollador107

    10 oct.


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

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.

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

  • ¡Probé esto en InfoBox y funciona! (aunque el pixelOffset aún debe corregirse)

    – comienzo

    18 dic. 15 en 07:22

  • Gran respuesta tanto por la simplicidad de la solución como por tener en cuenta el diseño receptivo

    – Daniel Tonón

    02 mar.

  • Obtengo un TypeError no capturado: no se puede leer la propiedad ‘toSpan’ de undefined

    –Mike Kormendy

    18 jul.

  • ¿Podemos obtener el newCenter lat long?

    – Sr. Tomar

    03 ago.

  • Esto no funcionaría si es necesario cambiar el zoom en la misma operación. Además, no funcionaría con precisión si el centro de destino (nuevo) está ubicado geográficamente lejos del centro actual. Incluso con el mismo nivel de zoom, 0,25 del ancho de la pantalla representa una distancia diferente en el ecuador que en Noruega, por ejemplo, debido a la proyección de Mercator utilizada. Proyectar las coordenadas finales es más robusto.

    – pscl

    06 may. 17 en 13:45


Como compensar el punto central en Google maps api V3
Nahuel

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

  • ¡Probé esto en InfoBox y funciona! (aunque el pixelOffset aún debe corregirse)

    – comienzo

    18 dic. 15 en 07:22

  • Gran respuesta tanto por la simplicidad de la solución como por tener en cuenta el diseño receptivo

    – Daniel Tonón

    02 mar.

  • Obtengo un TypeError no capturado: no se puede leer la propiedad ‘toSpan’ de undefined

    –Mike Kormendy

    18 jul.

  • ¿Podemos obtener el newCenter lat long?

    – Sr. Tomar

    03 ago.

  • Esto no funcionaría si es necesario cambiar el zoom en la misma operación. Además, no funcionaría con precisión si el centro de destino (nuevo) está ubicado geográficamente lejos del centro actual. Incluso con el mismo nivel de zoom, 0,25 del ancho de la pantalla representa una distancia diferente en el ecuador que en Noruega, por ejemplo, debido a la proyección de Mercator utilizada. Proyectar las coordenadas finales es más robusto.

    – pscl

    06 may. 17 en 13:45


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.

  • Me gusta mucho este enfoque. Mantiene Angular/javascript agradable y limpio.

    – Varios artistas

    29 mar. 17 a las 1:33

  • Gracias 🙂 Esto, por supuesto, deberá actualizarse cada vez que Google cambie sus estilos. Coloco comentarios antes del CSS que mueve las atribuciones y los controles, etc., lo que debería dar una idea de cómo lo hice si es necesario modificarlo. Será necesario crear CSS adicional para ordenar Street View.

    – Mardoxx

    29 mar. 17 a las 09:10


.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad