Zoom der Karte zentrieren / einstellen, um alle sichtbaren Markierungen abzudecken?

352

Ich setze mehrere Markierungen auf meiner Karte und kann die Zoomstufen und die Mitte statisch einstellen. Ich möchte jedoch, dass alle Markierungen abgedeckt und so weit wie möglich gezoomt werden, damit alle Märkte sichtbar sind

Folgende Methoden stehen zur Verfügung

setZoom(zoom:number)

und

setCenter(latlng:LatLng)

setCenterUnterstützt weder die Eingabe mehrerer Standorte oder Standortarrays noch setZoomverfügt diese Art von Funktionalität

Geben Sie hier die Bildbeschreibung ein

Trikaldarshi
quelle
Sie müssen das hinzufügen latlngzu einem boundsObjekt jedes Mal , wenn Sie eine Markierung hinzufügen und Ihre Karte die endgültigen Grenzen passen. Sehen Sie die Antwort hier: stackoverflow.com/questions/1556921/…
Suvi Vignarajah

Antworten:

678

Sie müssen die fitBounds()Methode verwenden.

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

map.fitBounds(bounds);

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

fitBounds(bounds[, padding])

Parameter:

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

Rückgabewert: Keine

Legt fest, dass das Ansichtsfenster die angegebenen Grenzen enthält.
Hinweis : Wenn die Karte auf eingestellt ist display: none, fitBoundsliest die Funktion die Größe der Karte als 0x0und führt daher nichts aus. Um das Ansichtsfenster zu ändern, während die Karte ausgeblendet ist, stellen Sie die Karte auf ein visibility: hidden, um sicherzustellen, dass das Kartendiv eine tatsächliche Größe hat.

Adam
quelle
3
Woher kam die getPositionMethode?
Pratheep
6
@Pratheep - es ist Teil der google.maps.Marker-Klasse; developer.google.com/maps/documentation/javascript/…
Adam
Lief wie am Schnürchen! Vielen Dank
Joseph N.
9
Nur zur Seite für die Neulinge da draußen, mit der gleichen Frage wie Pratheep ... Sie wissen das, wenn Sie Erfahrung mit der Maps-API haben, aber Sie können immer eine LatLngLiteralstatt einer Marker-Instanz übergeben. zB , bounds.extend({lat: 123, lng: 456}).
Kyle Baker
1
Ein zusätzlicher Tipp für alle Interessierten. Sie können eine Auffüllung definieren, indem fitBounds(bounds, int)Sie einen kleinen Abstand zwischen den Markierungen und den Kartenrändern verwenden (oder bei Bedarf weniger Platz). Siehe Dokumentation
MickelsonMichael
178

So erweitern Sie die gegebene Antwort mit wenigen nützlichen Tricks:

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)
}

UPDATE:
Weitere Untersuchungen im Thema zeigen, dass fitBounds () asynchron ist und es am besten ist, die Zoom-Manipulation mit einem definierten Listener durchzuführen, 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);
d.raev
quelle
4
Gute Ergänzungen. Vielen Dank!
paneer_tikka
1
Ich hatte undefiniert von .getZoom () zurückgegeben. Diese Antwort hat mir geholfen, das Problem zu lösen, indem ich mit addListenerOnceon zoom_changedden Zoom eingestellt habe, nachdem sein Wert initialisiert wurde.
xr280xr
1
Danke @ d.raev, aber das Einstellen des maximalen Zooms, wenn bereits Grenzen festgelegt sind, funktioniert nicht. Sie müssen beim Initialisieren Ihrer Karte die Option "maxZoom" festlegen. developer.google.com/maps/documentation/javascript/…
Tim
1
In dem Teil über die Zoom-Manipulation ( UPDATE ) mischen Sie ein paar Variablen und Bereiche. Sie verwenden yourMap, mapund this. Vielleicht ist es eine gute Idee, es konsistenter zu machen.
Gustavo Straube
11

Die Größe des Arrays muss größer als Null sein. Andernfalls erhalten Sie unerwartete Ergebnisse.

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);
    }
}
Fotis. Tsilfoglou
quelle
8

Es gibt dieses MarkerClustererclientseitige Dienstprogramm für Google Map, wie hier in den Artikeln des Google Map-Entwicklers angegeben. Hier finden Sie eine kurze Beschreibung der Verwendung:

Es gibt viele Ansätze, um das zu tun, wonach Sie gefragt haben:

  • Grid-basiertes Clustering
  • Entfernungsbasiertes Clustering
  • Viewport Marker Management
  • Fusionstabellen
  • Marker Clusterer
  • MarkerManager

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

Marker Clustererverwendet Grid Based Clustering, um alle Marker zu gruppieren, die das Grid wünschen. Beim gitterbasierten Clustering wird die Karte in Quadrate einer bestimmten Größe unterteilt (die Größe ändert sich bei jedem Zoom) und anschließend die Markierungen in jedem Gitterquadrat gruppiert.

Vor dem Clustering Vor dem Clustering

Nach dem Clustering Nach dem Clustering

Ich hoffe das ist was du gesucht hast und das wird dein Problem lösen :)

iyogeshjoshi
quelle