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é
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é:
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
Après le regroupement
J'espère que c'est ce que vous cherchiez et cela résoudra votre problème 🙂