Zentrieren/Setzen Sie den Zoom der Karte so, dass alle sichtbaren Marker abgedeckt sind?

Question

Ich setze mehrere Marker auf meiner Karte und ich kann statisch die Zoomstufen und das Zentrum setzen, aber was ich will ist, alle Marker abzudecken und so weit wie möglich zu zoomen, um alle Märkte sichtbar zu haben

Verfügbare Methoden sind folgende

setZoom(zoom:number)

und

setCenter(latlng:LatLng)

weder setCenter unterstützt mehrere Standorte oder Standortarray-Eingabe noch setZoom hat diese Art von Funktionalität

Answer 1

Sie müssen die fitBounds()-Methode verwenden.

var markers = [];//ein Array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i]);
}

map.fitBounds(bounds);

---

Dokumentation von developers.google.com/maps/documentation/javascript:

fitBounds(bounds[, padding])

Parameter:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

Rückgabewert: None

Legt die Ansichtsfenster fest, um die angegebenen Grenzen zu enthalten.
Hinweis: Wenn die Karte auf display: none gesetzt ist, liest die fitBounds-Funktion die Größe der Karte als 0x0, und tut daher nichts. Um den Ansichtsbereich zu ändern, während die Karte ausgeblendet ist, setzen Sie die Karte auf visibility: hidden, um sicherzustellen, dass das Kartendiv tatsächlich eine Größe hat.

Answer 2

Um die gegebene Antwort mit ein paar nützlichen Tricks zu erweitern:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i 15){
  map.setZoom(15);
}

//Alternativ kann dieser Code verwendet werden, um den Zoom für nur 1 Marker einzustellen und das Neuzuzeichnen zu überspringen.
//Beachten Sie, dass dies den Fall nicht abdeckt, wenn Sie 2 Marker an der gleichen Adresse haben.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

UPDATE:
Weitere Recherchen zum Thema zeigen, dass fitBounds() asynchron ist und es am besten ist, die Zoom-Manipulation mit einem Listener zu machen, der definiert ist, bevor Fit Bounds aufgerufen wird.
Danke @Tim, @xr280xr, weitere Beispiele zum Thema: 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);

Answer 3

Die Größe des Arrays muss größer als null sein. Andernfalls treten unerwartete Ergebnisse auf.

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

Answer 4

Es gibt dieses MarkerClusterer clientseitige Dienstprogramm für Google Maps, wie hier in den Google Map-Entwicklerartikeln beschrieben, hier ist eine kurze Zusammenfassung zur Verwendung:

Es gibt viele Ansätze, um das zu erreichen, was Sie gefragt haben:

• Rasterbasiertes Clustering
• Abstandsbasiertes Clustering
• Viewport-Marker-Verwaltung
• Fusion Tables
• Marker Clusterer
• MarkerManager

Sie können mehr darüber auf dem oben angegebenen Link lesen.

Marker Clusterer verwendet das Rasterbasierte Clustering, um alle Marker im Raster zu gruppieren. Das rasterbasierte Clustering funktioniert, indem die Karte in Quadrate einer bestimmten Größe unterteilt wird (die Größe ändert sich bei jedem Zoom) und dann die Marker in jedes Rasterquadrat gruppiert werden.

Vor dem Clustering

Nach dem Clustering

Ich hoffe, das ist das, wonach Sie gesucht haben, und das wird Ihr Problem lösen :)