Utilisation de setZoom () après avoir utilisé fitBounds () avec Google Maps API V3
J'utilise fitBounds() pour définir le niveau de zoom sur ma carte aussi inclure tous les marqueurs actuellement affichés. Cependant, quand 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 veux pas qu'il soit si loin zoomé 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ù cela.cartographie.bounds était précédemment défini comme:
this.map.bounds = new google.maps.LatLngBounds();
Cependant, le problème que je suis avoir 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 correcte car quand je commente la ligne fitBound (), setZoom() commence magiquement à fonctionner.
Des idées comment je résous cela? Je pense à définir un niveau maxZoom comme alternative si Je ne peux pas faire fonctionner cela.
7 réponses
D'accord, j'ai compris. Apparemment, fitbounds() se produit de manière asynchrone, vous devez donc attendre un événement bounds_changed avant de définir 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 qui ne nécessite pas de délai d'attente.
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'écouteur. Appelez-le directement avant d'utiliser fitBounds (je crois que l'appel après fonctionnera aussi).
J'ai trouvé le zoom supplémentaire pour être un peu discordant. Si vous définissez l'option maxZoom avant d'appeler fitBounds (puis de la désactiver 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
});
});
J'ai une solution simple et 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++;
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;
},
Je pense que la bonne façon de faire est que vous devez définir le niveau de zoom après map.fitBounds(bounds). Ajoutez simplement map.setZoom(16) après map.fitBounds(bounds). Il fonctionne très bien pour moi.
Toutes les solutions avec les écouteurs d'événements n'ont pas fonctionné pour moi (ceci.getZoom () est toujours indéfini dans le rappel et ceci.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);