2011-11-17 17 views
6

Me he encontrado con un problema donde la llamada a map.fitBounds parece alejarse. Estoy intentando usar el enrutador backbone.js para guardar los límites del mapa en la url. Quiero poder marcar la URL y luego hacer que el mapa se vea exactamente igual.google maps API 3 se aleja de fitBounds

Me di cuenta de que llamar a map.fitBounds(map.getBounds()) en la consola siempre se alejará. Donde como me gustaría no cambiar el mapa.

¿Es este comportamiento normal? ¿Cómo puedo hacer cumplir esto para que el mapa se vea igual de un paso al siguiente?

Gracias

Respuesta

9

Este problema de la API de Google Map se discutió varias veces. Ver:

Función map.fitBounds() establece la ventana para contener los límites. Pero la función map.getBounds() devuelve los límites de la ventana gráfica con un margen adicional (tenga en cuenta que esto es un comportamiento normal y no tiene errores). Los límites ampliados ya no caben en la ventana gráfica anterior, por lo que el mapa se aleja.

Una solución simple a su problema es usar el centro del mapa y el nivel de zoom en su lugar. Ver funciones map.getCenter(), map.setCenter(), map.getZoom() y map.setZoom().

+0

Me tomó más de 16 horas para aterrizar aquí. Incluso si esto no es un error, debería haber algo de trabajo para aquellos que están intentando hacer esto. –

0

Me di cuenta de este problema también. Mi solución es comparar map.getBounds() con lo que estoy estableciendo los límites; si son iguales, me estoy salteando la llamada map.fitBounds().

1

La fijación de este problema en 2017

Reducir la caja de contorno ligeramente antes de enviarlo a map.fitBounds().

Aquí es una función para reducir el tamaño del cuadro delimitador:

// Values between 0.08 and 0.28 seem to work 
// Any lower and the map will zoom out too much 
// Any higher and it will zoom in too much 
var BOUNDS_SHRINK_PERCENTAGE = 0.08; // 8% 

/** 
* @param {google.maps.LatLngLiteral} southwest 
* @param {google.maps.LatLngLiteral} northeast 
* @return {Array[google.maps.LatLngLiteral]} 
*/ 
function slightlySmallerBounds(southwest, northeast) { 
    function adjustmentAmount(value1, value2) { 
    return Math.abs(value1 - value2) * BOUNDS_SHRINK_PERCENTAGE; 
    } 

    var latAdjustment = adjustmentAmount(northeast.lat, southwest.lat); 
    var lngAdjustment = adjustmentAmount(northeast.lng, southwest.lng); 

    return [ 
    {lat: southwest.lat + latAdjustment, lng: southwest.lng + lngAdjustment}, 
    {lat: northeast.lat - latAdjustment, lng: northeast.lng - lngAdjustment} 
    ] 
} 

utilizar de esta manera:

// Ensure `southwest` and `northwest` are objects in google.maps.LatLngLiteral form: 
// southwest == {lat: 32.79712, lng: -117.13931} 
// northwest == {lat: 32.85020, lng: -117.09356} 

var shrunkBounds = slightlySmallerBounds(southwest, northeast); 
var newSouthwest = shrunkBounds[0]; 
var newNortheast = shrunkBounds[1]; 

// `map` is a `google.maps.Map` 
map.fitBounds(
    new google.maps.LatLngBounds(newSouthwest, newNortheast) 
); 

Tengo una aplicación haciendo lo mismo que codr: ahorro de los límites del mapa actual en el URL, e inicializando el mapa desde los límites de URL al actualizar. Esta solución funciona maravillosamente para eso.

¿Por qué funciona esto?

Google Maps esencialmente lo hace cuando fitBounds() se llama:

  1. centrar el mapa en el punto central del cuadro de límite dado.
  2. Amplía el nivel de zoom más alto donde la ventana contendrá los límites dados dentro de del cuadro de la ventana gráfica.

Si los límites dados sería exactamente coincidir con el puerto de vista, Google Maps no considera que a medida "que contiene" los límites, por lo que se aleja un nivel más.

0

Para las personas que vean esta pregunta en 2018, Google Maps API v3 ahora admite un segundo argumento padding que especifica la cantidad de relleno que se debe incluir alrededor de los límites especificados.

Para evitar el alejamiento, simplemente llame al fitBounds con un relleno de 0. Para este ejemplo sería map.fitBounds(map.getBounds(), 0)

Cuestiones relacionadas