javascript - icon - Usando setZoom() después de usar fitBounds() con Google Maps API V3

javascript marker google map

Question

Estoy usando fitBounds () para establecer el nivel de zoom en mi mapa, así como todos los marcadores que se muestran actualmente. Sin embargo, cuando tengo solo un marcador visible, el nivel de zoom es 100% (... que nivel de zoom 20 creo ...). Sin embargo, no quiero que se amplíe tanto para que el usuario pueda ajustar la posición del marcador sin tener que alejarse.

Tengo el siguiente código:

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
this.map.map.setZoom(16);
}
this.markerNumber++;

donde this.map.bounds se definió anteriormente como:

this.map.bounds = new google.maps.LatLngBounds();

Sin embargo, el problema que estoy teniendo es que la línea this.map.map.setZoom(16); no funciona si uso this.map.map.fitBounds(this.map.bounds); Sin embargo, sé que la línea de código es correcta porque cuando comento la línea fitBound (), el setZoom () mágicamente comienza a funcionar.

¿Alguna idea de cómo resuelvo esto? Estoy pensando en establecer un nivel de maxZoom como alternativa si no puedo hacerlo funcionar.

Answer 1

Acabo de agregar una línea a la función addBounds(position) y la corrigió, como se muestra a continuación:

 addBounds: function(position) {
this.get(''bounds'', new google.maps.LatLngBounds()).extend(this._latLng(position));
this.get(''map'').fitBounds(this.get(''bounds''));
this.get(''map'').setZoom(16);//line added
return this;
},

Answer 2

Creo que la forma correcta de hacerlo es que necesitas establecer el nivel de zoom después de map.fitBounds(bounds) . Simplemente agregue map.setZoom(16) después de map.fitBounds(bounds) . Funciona bien para mí.

Answer 3

De acuerdo, lo he descubierto. Aparentemente, los fitbounds () ocurren de forma asincrónica, por lo que debes esperar un evento bounds_changed antes de configurar el zoom.

map = this.map.map;
map.fitBounds(this.map.bounds);
zoomChangeBoundsListener =
google.maps.event.addListenerOnce(map, ''bounds_changed'', function(event) {
if (this.getZoom()){
this.setZoom(16);
}
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);

Actualización : vea la respuesta de @Nequin usando addListenerOnce para una mejor solución que no requiere tiempo de espera.

Answer 4

Encontré que el zoom adicional es un poco discordante. Si configura la opción maxZoom antes de llamar a fitBounds (y luego lo desarma en la devolución de llamada), puede evitarlo:

map.setOptions({
maxZoom: 10
});
map.setCenter(new google.maps.LatLng(-89, -179)); // make sure it changes so the idle listener gets called back
map.fitBounds(bounds);
var listener = google.maps.event.addListenerOnce(map, "idle", function()
{
map.setOptions({
maxZoom: 999
});
});

Answer 5

Tengo una solución simple y sucia.
Usar If else ...

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
if (this.markerNumber === 1) {
this.map.map.setZoom(16);
} else {
this.map.map.fitBounds(this.map.bounds);
}
this.markerNumber++;

Answer 6

Todas las soluciones con detectores de eventos no funcionaron para mí (this.getZoom () siempre está indefinido en la devolución de llamada y this.setZoom () no tiene ningún efecto).

Se me ocurrió esta solución que funcionó muy bien:

function set_zoom() {
if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);

Answer 7

google.maps.event.addListenerOnce(yourMap, ''bounds_changed'', function(event) {
if (this.getZoom() > 15) {
this.setZoom(15);
}
});

Esta solución funciona mejor ... en lugar de esperar el tiempo de espera para eliminar el oyente. Llame esto directamente antes de usar fitBounds (creo que llamar también funcionará).