web-dev-qa-db-fra.com

Ajustez automatiquement le zoom pour accueillir tous les marqueurs dans une carte Google

Utilisation de la dernière version de Google maps. Comment ajouter des marqueurs en utilisant la longitude et la latitude et ajuster automatiquement le niveau de zoom de la carte pour inclure tous les marqueurs en utilisant JavaScript?

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
40
TrustyCoder

L'API Google Maps v3 fournit un objet LatLngBounds auquel vous pouvez ajouter plusieurs objets LatLng. Vous pouvez ensuite le passer à la fonction Map.fitBounds() comme décrit ici:

Exemple partiel 

var latlng = [
    new google.maps.LatLng(1.23, 4.56),
    new google.maps.LatLng(7.89, 1.01),
    // ...
]; 
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
    latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);
79
Salman A

Vous ajoutez des marqueurs à votre carte google en instanciant un objet marker pour chacune de vos paires latitude/longitude:

var marker = new google.maps.Marker({
    position: currentLatLng, 
    map: map,
    title:"Title!"
});

L'option map du constructeur de marqueur associera le nouvel objet de marché à votre carte.

Pour agrandir votre carte pour inclure vos nouveaux marqueurs, vous utilisez la méthode fitBounds sur l'objet map . fitBounds prend un objet latLngBounds comme paramètre. Cet objet a une méthode extend pratique qui ajustera les limites pour inclure une nouvelle latitude/longitude. Il vous suffit donc de parcourir tous vos points, en appelant extend sur un seul objet latLngBounds. Cela étendra les limites pour inclure tous vos marqueurs. Une fois que vous avez fait cela, vous passez cet objet dans la méthode fitBounds sur la map et il zoomera pour afficher tous vos nouveaux marqueurs.

24
RedBlueThing