javascript - Sentrer/Sett zoom på kartet for å dekke alle synlige markører?

Jeg setter flere markører på kartet mitt, og jeg kan stille inn zoomnivåene og midtpunktet statisk, men det jeg ønsker er å dekke alle markørene og zoome så mye som mulig samtidig som alle markørene er synlige

Tilgjengelige metoder er følgende

setZoom(zoom:nummer)

og

settSenter(latlng:LatLng)

Verken setCenter støtter flere lokasjoner eller Location-array som input, eller setZoom har denne typen funksjonalitet

Svar #1

Du må bruke fitBounds()-metoden.

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

Dokumentasjon fra developers.google.com/maps/documentation/javascript:

tilpassGrenser(grenser[, polstring])

Parametere:

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

Returverdi: Ingen

Setter visningsområdet til å inneholde de gitte grensene.
Merk: Når kartet er satt til display: none, leser fitBounds-funksjonen kartets størrelse som 0x0, og gjør derfor ingenting. For å endre visningsområdet mens kartet er skjult, sett kartet til visibility: hidden, slik at kart-diven har en faktisk størrelse.

Svar #2

For å utvide det gitte svaret med noen nyttige triks:

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

OPPDATERING:
Videre forskning på emnet viser at fitBounds() er asynkron, og det er best å gjøre zoom-manipulering med en lytter definert før man kaller Fit Bounds.
Takk @Tim, @xr280xr, flere eksempler om emnet: 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);

Svar #3

Størrelsen på arrayet må være større enn null. Ellers vil du få uventede resultater.

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

Relaterte artikler