web-dev-qa-db-fra.com

Utilisation de setZoom () après l'utilisation de fitBounds () avec Google Maps API V3

J'utilise fitBounds () pour définir le niveau de zoom sur ma carte et inclure tous les marqueurs actuellement affichés. Cependant, lorsque je n'ai qu'un seul marqueur visible, le niveau de zoom est de 100% (... quel niveau de zoom 20 je pense ...). Cependant, je ne souhaite pas que le zoom soit aussi avancé afin que l'utilisateur puisse ajuster la position du marqueur sans avoir à effectuer un zoom arrière. 

J'ai le code suivant:

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

où this.map.bounds était défini précédemment comme suit:

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

Cependant, le problème que je rencontre est que la ligne this.map.map.setZoom(16); ne fonctionne pas si j'utilise this.map.map.fitBounds(this.map.bounds);. Cependant, je sais que cette ligne de code est correcte car lorsque je commente la ligne fitBound (), setZoom () commence à fonctionner comme par magie.

Des idées comment je résous ceci? Je songe à définir un niveau maxZoom comme solution de rechange si je ne parviens pas à le faire fonctionner.

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
72
Andrew De Andrade

Bon, je l'ai compris. Apparemment, fitbounds () se produit de manière asynchrone, vous devez donc attendre un événement bounds_changed avant de pouvoir régler le 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);

Update : Voir la réponse de @ Nequin en utilisant addListenerOnce pour une meilleure solution ne nécessitant pas de délai d'expiration.

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

Cette solution fonctionne mieux… au lieu d'attendre le délai d'attente pour supprimer l'auditeur. Appelez-le directement avant d’utiliser fitBounds (je crois que l’appel après fonctionnera également).

91
Nequin

J'ai trouvé le zoom supplémentaire un peu choquant. Si vous définissez l'option maxZoom avant d'appeler fitBounds (puis désélectionnez-la dans le rappel), vous pouvez l'éviter:

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
    });
});
15
Emery Lapinski

J'ai une solution simple et sale.
Utilisez sinon ... 

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++;
2
Vishwanath

Je viens d'ajouter une ligne à la fonction addBounds(position) et elle l'a corrigée, comme le montre ce qui suit:

    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;
    },
1
Mirek Komárek

Je pense que la bonne façon de faire est de définir le niveau de zoom après map.fitBounds(bounds). Ajoutez simplement map.setZoom(16) après map.fitBounds(bounds). Ça fonctionne bien pour moi.

0
Vandy Sodanheang

Toutes les solutions avec des écouteurs d'événement ne fonctionnaient pas pour moi (this.getZoom () est toujours indéfini dans le rappel et this.setZoom () n'a aucun effet).

Je suis venu avec cette solution qui a bien fonctionné:

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