Google Maps v3 : application du niveau de zoom minimum lors de l'utilisation de fitBounds

Question

Je dessine une série de marqueurs sur une carte (en utilisant la version 3 de l'API des cartes).

Dans la v2, j'avais 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 ce travail a permis de s'assurer qu'il y avait toujours un niveau de détail approprié affiché sur la carte.

J'essaie de reproduire cette fonctionnalité dans la version 3, mais les fonctions 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 permutations (déplacer le fitBounds avant le setZoom, par exemple) mais rien de ce que je fais avec le setZoom ne semble affecter la carte. Est-ce que quelque chose m'échappe ? Existe-t-il un moyen de faire cela ?

Answer 1

Sur cette discussion sur Google Groups J'ai découvert que lorsque vous effectuez un fitBounds, le zoom se produit de manière asynchrone et que vous devez capturer l'événement de changement de zoom et de limites. Le code dans le dernier post a fonctionné pour moi avec une petite modification... tel qu'il est, il vous empêche de zoomer plus de 15 complètement, donc j'ai utilisé l'idée du quatrième post pour avoir un drapeau défini pour ne le faire que 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);

J'espère que cela vous aidera,

Anthony.

Answer 2

Sans l'essayer, je dirais que vous devriez être en mesure de le faire juste en ayant fitBounds() avant d'obtenir le niveau de zoom, c.-à-d.

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

Si vous avez essayé et que cela n'a pas fonctionné, vous pouvez configurer votre carte avec minZoom dans le MapOptions (référence à l'api) comme ça :

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

Cela empêcherait la carte de zoomer davantage lorsque l'on utilise l'option fitBounds() .

Answer 3

La solution d'Anthony est très bien. J'ai seulement eu besoin de régler le zoom pour le chargement initial de la page (en m'assurant que le zoom n'était pas trop important au départ) et cela a fonctionné 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 ensuite :

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 seul élément, la carte peut effectuer un zoom trop rapproché. Pour résoudre ce problème, ajoutez simplement 'maxZoom' à mapOptions...

var mapOptions = {
  maxZoom: 15
};