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

Je suis en utilisant fitBounds() pour définir le niveau de zoom sur ma carte aussi inclure tous les marqueurs qui est actuellement affichée. Cependant, lorsque je n'ai qu'un marqueur visible, le niveau de zoom est à 100% (... le niveau de zoom de 20 je crois...). Cependant, je ne veux pas qu'il soit loin de zoom de sorte que l'utilisateur peut 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ù cela.carte.limites précédemment définies comme suit:

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

Cependant, le problème que j'ai 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 la ligne de code est correct, parce que quand je commenter la fitBound() en ligne, le setZoom() comme par magie commence à fonctionner.

Des idées comment je résoudre ce problème? Je suis en train de réfléchir à mettre un par maxzoom niveau comme une alternative si je ne peux pas obtenir ce travail.

  • L' .carte.la carte est en effet là ou est-ce une erreur?Si possible, télécharger une page de test et de fournir un linkso on peut voir le problème avec plus de facilité.
  • Je vais avoir le même problème. Aimerait savoir un correctif.
  • .carte.la carte était là sur le but. Le premier fait référence à ma carte objet et le second à la google map de l'objet. Depuis, j'ai nettoyé ce problème de mon code.
  • voir stackoverflow.com/questions/2437683/...
InformationsquelleAutor Andrew De Andrade | 2010-12-23
  1. 108

    Bien, j'ai pensé à elle. Apparemment, le fitbounds() se produit de manière asynchrone, donc vous devez attendre pour un bounds_changed événement avant de définir le zoom fonctionne.

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

    Mise à jour: Voir @Nequin de la réponse à l'aide de addListenerOnce pour une meilleure solution qui ne nécessite pas un délai d'attente.

    • Belle solution a fonctionné pour moi aussi. Bien que vous pourriez avoir fait addListenerOnce() qui permettrait d'en finir avec la removeListener() appel.
    • En plus de l'utilisation de addListenerOnce, je conseille d'utiliser setTimeout pour supprimer l'auditeur. J'ai eu un cas où les limites n'ont pas changé parce que les marqueurs ont été en proximité les uns des autres. Avec ce code, l'utilisateur serait incapable de zoom (au moins une fois).
    • h0tw1r3: j'ai édité le code à ajouter vos suggestions, merci! Ne pas le tester, donc espérons que je n'ai pas introduire des erreurs stupides.
    • herman j'ai bloqué sur ce problème pendant environ 3 heures...thnx de nouveau...
    • Ne pas le setTimeout être placé à l'extérieur de la fonction d'écouteur d'avoir l'effet désiré?
    • Merci, il fixe.
    • addListernerOnce a fait le tour, merci de répondre à @HermanSchaaf
    • J'ai dû mettre la removeListener à l'intérieur de la addListener fonction de rappel. Sinon l'exécution de supprimer l'auditeur, même avant de l'appeler.

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

    Cette solution fonctionne mieux... au lieu d'attendre sur le délai d'attente pour retirer de l'auditeur. Appelez directement avant d'utiliser fitBounds (je crois que l'appel après fonctionnera aussi bien).

    • Cela fonctionne beaucoup mieux que la accepté de répondre à
    • La bonne solution. Pourrait-il faire mieux en utilisant google.maps.event.addListenerOnce au lieu de l'ajout et de retrait de l'auditeur.
    • J'ai pris la liberté de modifier la réponse à utiliser addListenerOnce.
    • Cette solution ne fonctionne pas pour moi. c'.getZoom() est toujours pas défini dans le rappel, et ce.setZoom() n'a aucun effet.
    • Parfait, la meilleure réponse
    InformationsquelleAutor Nequin
  3. 15

    J'ai trouvé le supplément de zoom à être un peu choquante. Si vous définissez la par maxzoom option avant d'appeler fitBounds (et puis unset il 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
    });
});
    • par maxzoom est une excellente solution
    InformationsquelleAutor Emery Lapinski
  4. 2

    J'ai simple et la solution sale.

    Utiliser Si d'autre ... 

    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++;
    • Mais savez-vous pourquoi les deux ne travaillent pas ensemble? Je ne vois pas pourquoi ceux-ci sont incompatibles lorsqu'il est appelé en série.
    InformationsquelleAutor Vishwanath
  5. 1

    J'ai juste ajouté une ligne à la fonction addBounds(position) et il a fixé, comme le montre l'exemple suivant:

        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;
    },
    InformationsquelleAutor Mirek Komárek
  6. 0

    Je pense que la bonne façon de le faire est que vous devez définir le niveau de zoom après map.fitBounds(bounds). Simplement ajouter map.setZoom(16) après map.fitBounds(bounds). Il fonctionne très bien pour moi.

    InformationsquelleAutor Vandy Sodanheang
  7. 0

    Toutes les solutions avec les écouteurs d'événement n'a pas fonctionné pour moi (ce.getZoom() est toujours pas défini dans le rappel, et ce.setZoom() n'a aucun effet).

    J'ai trouvé cette solution qui fonctionnait bien:

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