Google Maps v3: min Faire respecter. niveau de zoom lors de l'utilisation fitBounds

Question

Je dessine une série de marqueurs sur une carte (en utilisant v3 des cartes api).

Dans v2, j'ai eu le code suivant:

  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);

Et qui fonctionnent bien pour assurer qu'il y avait toujours un niveau de détail approprié affiché sur la carte.

Je suis en train de dupliquer cette fonctionnalité dans v3, mais le setZoom et fitBounds ne semblent pas coopérer:

... 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);

J'ai essayé différentes permutation (déplacement des fitBounds avant la setZoom, par exemple), mais rien que je fais avec setZoom semble affecter la carte. Est-ce que je manque quelque chose? Est-il possible de le faire?

Answer 1

cette discussion sur Google Groupes j'ai découvert que, fondamentalement, quand vous faites un fitBounds, le zoom de façon asynchrone arrive vous devez capturer le zoom et les limites événement de changement. Le code dans le dernier poste a travaillé pour moi avec une petite modification ... tel qu'il est, il vous arrête un zoom supérieur à 15 complètement, donc utilisé l'idée du quatrième poste d'avoir un ensemble de drapeau pour ne le faire la première fois.

// 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);

Hope qui aide,

Anthony.

Answer 2

Sans essayer, je dirais que vous devriez être en mesure de le faire tout en ayant fitBounds() avant d'obtenir le niveau de zoom, i.e..

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

Si vous avez essayé et ça n'a pas de travail, vous pouvez configurer votre carte avec minZoom dans le MapOptions ^{(api référence)} comme ceci:

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

garderait la carte de zoom sur une autre lors de l'utilisation fitBounds().

Answer 3

La solution d'Anthony est très agréable. Je ne devais fixer le zoom pour la charge de la page inital (veiller à ce que vous avez pas trop loin pour commencer) et cela a fait l'affaire pour moi:

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

Vous pouvez également définir l'option maxZoom juste avant d'appeler fitBounds () et réinitialiser la valeur après:

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

Answer 5

Lorsque vous appelez map.fitBounds () sur un élément - la carte peut zoomer trop près. Pour corriger cela, il suffit d'ajouter 'maxZoom' à mapOptions ...

var mapOptions = {
  maxZoom: 15
};

Answer 6

Dans mon cas, je voulais simplement régler le niveau de zoom à un de moins que ce que google maps choisi pour moi pendant fitBounds. Le but était d'utiliser fitBounds, mais aussi assurer qu'aucun des marqueurs étaient sous tous les outils cartographiques, etc.

Ma carte est créé au début puis un certain nombre d'autres composants dynamiques de la page ont la possibilité d'ajouter des marqueurs, appelant fitBounds après chaque addition.

Ceci est dans le bloc initial dans lequel l'objet carte est créé à l'origine ...

var mapZoom = null;

Ensuite, cela est ajouté à chaque bloc où un marqueur est ajouté, juste avant le map.fitBounds est appelé ...

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

Lorsque vous utilisez « bounds_changed » sans le contrôle en place, la carte zoomée une fois pour chaque marqueur, peu importe que ce soit nécessaire ou non. A l'inverse, quand je « zoom_changed », je parfois des marqueurs sous les outils cartographiques parce que le zoom n'a pas réellement changé. Maintenant, il est toujours déclenché, mais le chèque assure qu'il effectue un zoom avant seulement une fois et seulement en cas de besoin.

Hope this helps.

Answer 7

Depuis Google Maps V3 est l'événement commandé, vous pouvez dire l'API pour remettre le zoom à une quantité appropriée lorsque le zoom_changed déclencheurs d'événements:

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

je initial pour la carte ne zoom trop quand les éventuels fitBounds est permorfed, mais de laisser le zoom utilisateur autant qu'il / elle veut. Sans la condition tout état de cause de zoom sur 11 serait possible pour l'utilisateur.

Answer 8

J'ai trouvé ce qui suit au travail tout à fait bien. Il est une variante réponse de Ryan https: //stackoverflow.com/questions/3334729 / ... . Elle garantit à montrer une surface d'au moins deux fois la valeur de offset en degrés.

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))