javascript - notes - google maps api version 4

Google Maps v3: aplicación de mín. nivel de zoom cuando se usa fitBounds

Question

Dibujo una serie de marcadores en un mapa (utilizando v3 de la API de mapas).

En v2, tuve 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 eso funciona bien para garantizar que siempre haya un nivel de detalle apropiado que se muestre en el mapa.

Estoy intentando duplicar esta funcionalidad en v3, pero los setZoom y 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);

Probé una permutación diferente (moviendo los fitBounds antes de 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

Cuando llama a map.fitBounds () en un elemento, es posible que el mapa se acerque demasiado. Para solucionar esto, simplemente agrega ''maxZoom'' a mapOptions ...

var mapOptions = {
  maxZoom: 15
};

Answer 2

Debido a que Google Maps V3 está basado en eventos, puedes decirle a la API que reduzca el zoom a una cantidad adecuada cuando se active el evento zoom_changed :

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

Usé initial para hacer que el mapa no se acercara demasiado cuando el fitBounds eventual se permoró, pero para que el usuario pueda hacer zoom tanto como lo desee. Sin la condición, cualquier evento de zoom por encima de 11 sería posible para el usuario.

Answer 3

En mi caso, simplemente quería establecer el nivel de zoom en uno menos de lo que google maps eligió para mí durante fitBounds. El propósito era usar fitBounds, pero también asegurar que no hubiera marcadores debajo de ninguna herramienta de mapas, 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 se creó originalmente el objeto del mapa ...

var mapZoom = null;

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

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

Al usar ''bounds_changed'' sin el control en su lugar, el mapa se alejó una vez para cada marcador independientemente de si lo necesitaba o no. Por el contrario, cuando usaba ''zoom_changed'', a veces tenía marcadores debajo de las herramientas de mapa porque el zoom no cambiaba realmente. Ahora siempre se activa, pero la verificación asegura que solo se aleja una vez y solo cuando sea necesario.

Espero que esto ayude.

Answer 4

La solución de Anthony es muy agradable. Solo necesité arreglar el zoom para la carga de la página inicial (asegurándome de que no estuviste demasiado enfocado para comenzar) y esto fue lo que hizo el truco para mí:

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 5

Sin intentarlo, diría que deberías poder hacerlo con 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 MapOptions ^{(api-reference)} esta manera:

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

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

Answer 6

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 7

Yo estaba buscando lo mismo :)

En esta discusión sobre Grupos de Google , descubrí que, básicamente, cuando haces un fitBounds, el zoom ocurre de forma asíncrona, por lo que debes capturar el zoom y el evento de cambio de límites. El código en la publicación final funcionó para mí con una pequeña modificación ... tal como está, deja de hacer zoom de más de 15 por completo, así que usé la idea desde la cuarta publicación para tener una bandera configurada para que solo lo haga 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.