Google Maps V3: Hacer cumplir min. Nivel de zoom cuando se usa FitBounds

Question

Estoy dibujando una serie de marcadores en un mapa (usando V3 de la API MAPS).

En V2, tenía el siguiente código:

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

Y ese funcione bien para garantizar que siempre se muestre un nivel de detalle apropiado en el mapa.

Estoy tratando de duplicar esta funcionalidad en V3, pero el setzoom y los fitbounds no parecen estar cooperando:

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

He probado diferentes permutaciones (moviendo los ajustes antes del setzoom, por ejemplo), pero nada de lo que hago con SetZoom parece afectar el mapa. ¿Me estoy perdiendo de algo? ¿Hay alguna forma de hacer esto?

Answer 1

A Esta discusión en los grupos de Google Descubrí que básicamente cuando haces un ajuste, el zoom ocurre de manera asincrónica, por lo que debes capturar el evento Zoom y Bounds Change. El código en la publicación final funcionó para mí con una pequeña modificación ... tal como está, lo que le detiene al zoom más de 15 por completo, por lo que usó la idea de la cuarta publicación para tener una bandera configurada para hacerlo solo la primera vez.

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

Espero que ayude,

Antonio.

Answer 2

Sin intentarlo, diría que deberías poder hacerlo con solo tener fitBounds() Antes de obtener el nivel de zoom, es decir

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);

Si lo intentó y no funcionó, puede configurar su mapa con minZoom en el MapOptions ^{(API-Reference)} como esto:

var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 });

Esto evitaría que el mapa se aleje más al usar fitBounds().

Answer 3

La solución de Anthony es muy agradable. Solo necesitaba arreglar el zoom para la carga de la página Inital (asegurando que no estuvieras demasiado lejos para empezar) y esto me hizo el truco:

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );

Answer 4

También puede configurar la opción MaxZoom justo antes de llamar a FitBounds () y restablecer el valor después:

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}

Answer 5

Cuando llamas a map.fitBounds () en un elemento, el mapa puede acercar demasiado. Para solucionar esto, simplemente agregue 'MaxZoom' a MapOptions ...

var mapOptions = {
  maxZoom: 15
};

Answer 6

En mi caso, simplemente quería establecer el nivel de zoom en uno menos de lo que Google Maps eligió para mí durante los fitbounds. El propósito era usar FitBounds, pero también asegurarse de que no se hubieran marcado en ninguna herramienta de mapa, etc.

Mi mapa se crea temprano y luego varios otros componentes dinámicos de la página tienen la oportunidad de agregar marcadores, llamando a FitBounds después de cada adición.

Esto está en el bloque inicial donde el objeto mapa se crea originalmente ...

var mapZoom = null;

Luego, esto se agrega a cada bloque donde se agrega un marcador, justo antes de que el map.fitBounds se llame ...

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

Cuando se usa 'Bounds_Changed' sin el cheque en su lugar, el mapa se alejó una vez para cada marcador, independientemente de si lo necesitaba o no. Por el contrario, cuando usé 'Zoom_Changed', a veces tenía marcadores en Map Tools porque el Zoom en realidad no cambió. Ahora siempre se activa, pero la verificación asegura que solo se aleje una vez y solo cuando sea necesario.

Espero que esto ayude.

Answer 7

Dado que Google Maps V3 está impulsado por el evento, puede decirle a la API que retrase el zoom a una cantidad adecuada cuando el zoom_changed Disparadores del evento:

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (initial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         initial = false;
       }
    }
}); 

solía inicial Para hacer que el mapa no se acerque demasiado cuando se permita el FitBounds eventual, pero dejar que el usuario se acerque tanto como él/ella. Sin la condición, cualquier evento de zoom más de 11 sería posible para el usuario.

Answer 8

Encontré que lo siguiente funciona bastante bien. Es una variante de Ryan's responder a https: //stackoverflow.com/questions/3334729/.... Garantiza mostrar un área de al menos dos veces el valor de offset en grados.

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))