setzoom - Google Maps v3 fitBounds() Zoom demasiado cerca para marcador individual

google maps zoom level

Question

¿Hay alguna manera de establecer un nivel de zoom máximo para fitBounds() ? Mi problema es que cuando el mapa solo se alimenta con una ubicación, se acerca todo lo que puede, lo que realmente saca el mapa del contexto y lo deja inútil. Tal vez estoy tomando el enfoque equivocado?

¡Gracias por adelantado!

Answer 1

Aquí está mi ir en una solución, que también funciona cuando dos marcadores están muy cerca. El nivel de zoom máximo efectivo es el mismo en ambas situaciones. Así que no terminamos haciendo zoom innecesariamente, cuando hay más de un marcador

El efecto, una vez más, es garantizar un zoom máximo, sin usar la opción maxZoom, que tiene el efecto probablemente no deseado de que sea imposible para el usuario acercar más el nivel de maxZoom con el control del zoom

He calculado maxLat, minLat, maxLng y minLng de antemano ...

var minLatSpan = 0.002;
if (maxLat - minLat < minLatSpan) {
  // ensures that we do not zoom in too much
  var delta = (minLatSpan - (maxLat - minLat)) / 2;
  maxLat += delta;
  minLat -= delta;
}

map.fitBounds({
  east: maxLng,
  west: minLng,
  north: maxLat,
  south: minLat,
});

Answer 2

Aquí ya está respondido Google Maps v3: Enforcing min. nivel de zoom cuando se usa fitBounds funciona como se esperaba :) así que ahora, si después de los límites de ajuste, el zoom es menor, entonces digamos 13, entonces puede establecer un nuevo zoom que prefiera

Answer 3

Después de llamar fitBounds() método fitBounds() , intente configurar el nivel de zoom nuevamente. Obligará al mapa a estar en ese nivel de zoom mientras está centrado en el lugar correcto.

Answer 4

En cuanto a mí chicos, lo resuelvo creando un evento inactivo después de fitBounds. Funcionando perfectamente Supongo que es una de las soluciones más limpias aquí

var locations = [[''loc'', lat, lng], [''loc'', lat, lng]];
.....
for (i = 0; i < locations.length; i++) { 
  var map = new google.maps.Map(document.getElementById(''map''), {
    zoom: 10
  });
  .... create markers, etc.
}
....
map.fitBounds(bounds);  
google.maps.event.addListenerOnce(map, ''idle'', function() {
  if (locations.length == 1) {
    map.setZoom(11);
  }
});

Answer 5

Esto le da un control directo sobre el ajuste de zoom máximo permitido en los límites.

var fitToMarkers = function(map, markers, maxZoom) {
    if (typeof maxZoom == ''undefined'') maxZoom = 15;

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

    var bounds = new google.maps.LatLngBounds();
    for (var m = 0; m < markers.length; m++) {
        var marker = markers[m];
        var latlng = marker.getPosition();
        bounds.extend(latlng);
    }

    map.fitBounds(bounds);
};

Answer 6

La forma en que evito que el mapa se acerque demasiado está agregando esta línea de código:

var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
        zoomOverride = 15;
        }
      map.setZoom(zoomOverride);

Directamente después de esta línea:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

Siéntase libre de cambiar el nivel de zoom al nivel que no desee que el mapa pase de largo.

Si tiene algún problema o pregunta, simplemente déjeme un comentario en la publicación del blog que escribí sobre esto en http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the-map-from-zooming-in-too-close-on-a-single-marker

Answer 7

Lo resolví con este fragmento, ya que Google Maps V3 está basado en eventos:

puede indicarle 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 (intial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         intial = false;
       }
    }
}); 

Utilicé inicialmente para hacer que el mapa no se acercara demasiado cargando cuando eventualmente los fitBounds permorfed, sin ningún evento de zoom sobre 11 sería imposible para el usuario.

Answer 8

Me gusta la solución de mrt (especialmente cuando no sabes cuántos puntos estarás mapeando o ajustando), excepto que tira el marcador para que ya no esté en el centro del mapa. Simplemente lo extendí por un punto adicional restando .01 del lat y lng también, por lo que mantiene el marcador en el centro. Funciona muy bien, gracias mrt!

// Pan & Zoom map to show all markers
function fitToMarkers(markers) {

    var bounds = new google.maps.LatLngBounds();

    // Create bounds from markers
    for( var index in markers ) {
        var latlng = markers[index].getPosition();
        bounds.extend(latlng);
    }

    // Don''t zoom in too far on only one marker
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
       var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
       var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
       bounds.extend(extendPoint1);
       bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);

    // Adjusting zoom here doesn''t work :/

}

Answer 9

Otra solución es ampliar los límites si detecta que son demasiado pequeños antes de ejecutar fitBounds ():

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like
// ...
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
   bounds.extend(extendPoint);
}
map.fitBounds(bounds);

Answer 10

Puede configurar su mapa con maxZoom en MapOptions ^{(api-reference)} esta manera:

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

Esto evitaría que el mapa se fitBounds() más al usar fitBounds() e incluso eliminaría los niveles de zoom del control de zoom.

Answer 11

Realmente me gusta la solución de mrt y funciona perfectamente si siempre tienes un solo punto para trabajar. Sin embargo, encontré que si el cuadro delimitador no se basaba en un punto, sino que los puntos estaban muy juntos, esto aún podría hacer que el mapa se acercara demasiado.

Aquí hay una manera de verificar primero si los puntos están dentro de una distancia definida entre sí, luego, si son más pequeños que esa distancia mínima, amplíe los límites en esa distancia mínima:

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like

// ...

var minDistance = 0.002;
var sumA = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var sumB = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();

if((sumA < minDistance && sumA > -minDistance) 
&& (sumB < minDistance && sumB > -minDistance)){
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + minDistance, bounds.getNorthEast().lng() + minDistance);
    var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - minDistance, bounds.getNorthEast().lng() - minDistance);
    bounds.extend(extendPoint1);
    bounds.extend(extendPoint2);
}

¡Espero que esto ayude a alguien!

Answer 12

Si se trata de una única ubicación, puede usar setCenter () y setZoom () en su lugar.

Answer 13

Tengo una salsa basada en limitar el zoom máximo al ajustar los límites. Funciona para mí (probado en Win 7 - IE 9, FF 13, Chrome 19):

// When fitting bounds:
var bounds = new google.maps.LatLngBounds();
// ...
// extend bounds as you like
// ..

// now set global variable when fitting bounds
window.fittingBounds = true;
map.fitBounds(bounds);
window.fittingBounds = false;


// attach this event listener after map init
google.maps.event.addListener(map, ''zoom_changed'', function() {
    // set max zoom only when fitting bounds
    if (window.fittingBounds && map.getZoom() > 16) {
        this.setZoom(16);
    }
});

Answer 14

Una vez que haya agregado todos los límites reales, agregue estas líneas

var offset = 0.002;     
var center = bounds.getCenter();                            
bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset));
bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset));

obtiene el centro de los límites reales y luego agrega dos puntos adicionales uno al noreste y uno al suroeste de su centro

Esto establece efectivamente el zoom mínimo, cambia el valor de desplazamiento para aumentar o disminuir el zoom

Answer 15

Y aqui esta otro.
La misma idea que mrt y Ryan, pero

• también funciona si el tamaño de los límites no es exactamente cero (*)
• evita la distorsión cerca de los polos
• usa getCenter () en lugar de getNorthEast ()

(*) Nota: Si la caja ya es lo suficientemente grande, agregar esos dos puntos extra no debería tener ningún efecto. Entonces no necesitamos ninguna verificación adicional.

function calcBounds(markers) {
  // bounds that contain all markers
  var bounds = new google.maps.LatLngBounds();
  // Using an underscore _.each(). Feel free to replace with standard for()
  _.each(markers, function(marker) {
    bounds.extend(marker.getPosition());
  });
  // prevent lat/lng distortion at the poles
  var lng0 = bounds.getNorthEast().lng();
  var lng1 = bounds.getSouthWest().lng();
  if (lng0 * lng1 < 0) {
    // Take the cos at the equator.
    var cos = 1;
  }
  else {
    var cos0 = Math.cos(lng0);
    var cos1 = Math.cos(lng1);
    // Prevent division by zero if the marker is exactly at the pole.
    var cos_safe = Math.max(cos0, cos1, 0.0001);
  }
  var cos0 = Math.cos(bounds.getNorthEast.lng() * Math.PI / 180);
  var cos1 = Math.cos(bounds.getSouthWest.lng() * Math.PI / 180);
  // "radius" in either direction.
  // 0.0006 seems to be an ok value for a typical city.
  // Feel free to make this value a function argument.
  var rLat = 0.0006;
  var rLng = rLat / cos_safe;
  // expand the bounds to a minimum width and height
  var center = bounds.getCenter();
  var p0 = new google.maps.LatLng(center.lat() - rLat, center.lng() - rLng);
  var p1 = new google.maps.LatLng(lat.center() + rLat, center.lng() + rLng);
  bounds.extend(p0);
  bounds.extend(p1);
  return bounds;
}

EDITAR: No estoy seguro de si el cálculo de mi razón es correcto, teniendo en cuenta que tenemos una proyección de Mercator. Podría volver a editar esto ...

Answer 16

puedes usar

map.setOptions({
    maxZoom: [what u want],
    minZoom: [what u want]
});

de esta manera usted establece las propiedades del mapa una vez que se ha inicializado el mapa ... puede configurarlo tantas veces como desee ... pero en su caso ... puede configurarlo antes de fitBounds ()

buena suerte, rarutu

Answer 17

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

Usar la opción MaxZoom funciona mejor para no acercarse a las marcas que tiene.