Centre / Zoom de la carte pour couvrir tous les marqueurs visibles?

Je définis plusieurs marqueurs sur ma carte et je peux définir de manière statique les niveaux de zoom et le centre, mais ce que je veux, pour couvrir tous les marqueurs et zoom autant que possible avec tous les marchés visibles

Les méthodes disponibles suivent

SetZoom (zoom: nombre)

et

SetCenter (latlng: LatLng)

Ni setCenter ne supporte l' multiple location or Location array entrée du multiple location or Location array ni setZoom possède un tel type de fonctionnalité

Entrez la description de l'image ici

Vous devez utiliser la méthode fitBounds() .

 var markers = [];//some array var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { bounds.extend(markers[i].getPosition()); } map.fitBounds(bounds); 

Référence :

Pour étendre la réponse donnée avec quelques astuces utiles:

 var markers = //some array; var bounds = new google.maps.LatLngBounds(); for(i=0;i<markers.length;i++) { bounds.extend(markers[i].getPosition()); } //center the map to a specific spot (city) map.setCenter(center); //center the map to the geometric center of all markers map.setCenter(bounds.getCenter()); map.fitBounds(bounds); //remove one zoom level to ensure no marker is on the edge. map.setZoom(map.getZoom()-1); // set a minimum zoom // if you got only 1 marker or all markers are on the same address map will be zoomed too much. if(map.getZoom()> 15){ map.setZoom(15); } //Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing. //Note that this will not cover the case if you have 2 markers on the same address. if(count(markers) == 1){ map.setMaxZoom(15); map.fitBounds(bounds); map.setMaxZoom(Null) } 

METTRE À JOUR:
D'autres recherches sur le sujet montrent que fitBounds () est un asynchrone et il est préférable de faire modifier la manipulation du zoom avec un auditeur avant d'appeler Fit Bounds.
Merci @Tim, @ xr280xr, plus d'exemples sur le sujet: SO: setzoom-after-fitbounds

 google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { this.setZoom(map.getZoom()-1); if (this.getZoom() > 15) { this.setZoom(15); } }); map.fitBounds(bounds); 

Il existe cet utilitaire côté client MarkerClusterer disponible pour google Map tel qu'indiqué ici sur les articles développeurs de Google Map , voici une brève MarkerClusterer utilisation de Google Map:

Il existe de nombreuses approches pour faire ce que vous avez demandé:

  • Groupement basé sur la grille
  • Groupement basé sur la distance
  • Gestion des marqueurs de visages
  • Tables Fusion
  • Marker Clusterer
  • MarkerManager

Vous pouvez les lire sur le lien fourni ci-dessus.

Marker Clusterer utilise Grusted Based Clustering pour regrouper tout le marqueur souhaitant la grille. Le regroupement basé sur la grille fonctionne en divisant la carte en carrés d'une certaine taille (la taille change à chaque zoom) et en regroupant les marqueurs dans chaque quadrillage.

Avant le regroupement Avant le regroupement

Après le regroupement Après le regroupement

J'espère que c'est ce que vous cherchiez et cela résoudra votre problème 🙂