Google Maps v3: Applicazione min. Livello zoom quando si utilizza fitBounds

Question

sto disegnando una serie di marcatori su una mappa (usando v3 della API di Google Maps).

In v2, ho avuto il seguente codice:

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  bounds.extend(point);
  ... end looping

  map.setCenter(bounds.getCenter());
  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

E che bel lavoro per garantire che non vi era sempre un adeguato livello di dettagli visualizzati sulla mappa.

Sto cercando di duplicare questa funzionalità in v3, ma il setZoom e fitBounds non sembrano essere cooperare:

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
  bounds.extend(ll);
... end loop

var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);
map.fitBounds(bounds);

Ho provato permutazione differente (spostando le fitBounds prima del setZoom, per esempio), ma nulla che io faccio con setZoom sembra influenzare la mappa. Mi sto perdendo qualcosa? C'è un modo per fare questo?

Answer 1

questa discussione sulla Google Gruppi ho scoperto che in fondo quando si fa un fitBounds, lo zoom avviene in modo asincrono, quindi è necessario per catturare lo zoom e limiti evento di modifica. Il codice nel post finale ha funzionato per me con una piccola modifica ... così com'è si ferma si zoom superiore a 15 completamente, in modo utilizzato l'idea dal quarto posto di avere un set bandiera per fare solo la prima volta.

// Do other stuff to set up map
var map = new google.maps.Map(mapElement, myOptions);
// This is needed to set the zoom after fitbounds, 
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
map.initialZoom = true;
map.fitBounds(bounds);

Speranza che aiuta,

Anthony.

Answer 2

senza provarlo, direi che si dovrebbe essere in grado di farlo soltanto con fitBounds() prima di ottenere il livello di zoom, cioè.

map.fitBounds(bounds);
var zoom = map.getZoom();
map.setZoom(zoom > 6 ? 6 : zoom);

Se hai provato quello e non ha funzionato, è possibile impostare la tua mappa con minZoom nel MapOptions ^{(API-riferimento)} in questo modo:

var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 });

Questo avrebbe mantenuto la mappa da zoom ulteriormente quando si utilizza fitBounds().

Answer 3

La soluzione di Anthony è molto bello. Ho solo bisogno di fissare lo zoom per il caricamento della pagina inital (assicurando che non eri troppo lontano ingrandito per iniziare con) e questo ha fatto il trucco per me:

var zoomChangeBoundsListener =
    google.maps.event.addListener(map, 'bounds_changed', function(event) {
        google.maps.event.removeListener(zoomChangeBoundsListener);
        map.setZoom( Math.min( 15, map.getZoom() ) );
    });


map.fitBounds( zoomBounds );

Answer 4

È anche possibile impostare l'opzione maxZoom poco prima di chiamare fitBounds () e reimpostare il valore di seguito:

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.fitBounds(bounds);
    map.setOptions({maxZoom: originalMaxZoom});
}

Answer 5

Quando si chiama map.fitBounds () su un oggetto - la mappa può ingrandire troppo da vicino. Per risolvere questo problema, è sufficiente aggiungere 'maxZoom' per mapOptions ...

var mapOptions = {
  maxZoom: 15
};

Answer 6

Nel mio caso, ho semplicemente voluto impostare il livello di zoom per uno meno di quello che google maps ha scelto per me durante fitBounds. Lo scopo era quello di utilizzare fitBounds, ma anche garantire l'assenza di marcatori sono stati in nessun strumenti mappa, ecc

La mia mappa è creata presto e poi una serie di altri componenti dinamiche della pagina hanno la possibilità di aggiungere marcatori, chiamando fitBounds dopo ogni aggiunta.

Questo è nel blocco iniziale in cui viene originariamente creato l'oggetto della mappa ...

var mapZoom = null;

Allora questo viene aggiunto a ciascun blocco in cui viene aggiunto un marcatore, subito prima del map.fitBounds si chiama ...

google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    if (mapZoom != map.getZoom()) { 
        mapZoom = (map.getZoom() - 1); 
        map.setZoom(mapZoom); 
    } 
});

Quando si utilizza 'bounds_changed' senza il controllo sul posto, la mappa ingrandito una volta per ogni marcatore indipendentemente dal fatto che ne aveva bisogno o no. Al contrario, quando ho usato 'zoom_changed', avrei a volte hanno i marcatori sotto Strumenti mappa perché lo zoom in realtà non cambia. Ora è sempre attivato, ma le assicura di controllo che si ingrandisce solo una volta e solo quando necessario.

Spero che questo aiuti.

Answer 7

Dal momento che Google Maps V3 è l'evento guidato, si può dire l'API per impostare di nuovo lo zoom a una quantità adeguata quando il zoom_changed trigger di evento:

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (initial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         initial = false;
       }
    }
}); 

ho usato prima per fare la mappa non lo zoom troppo quando gli eventuali fitBounds è permorfed, ma di lasciare all'utente di ingrandire quanto lui / lei vuole. Senza la condizione ogni caso zoom oltre 11 sarebbe possibile per l'utente.

Answer 8

ho trovato quanto segue al lavoro abbastanza bene. Si tratta di una variante per la risposta di Ryan per https: //stackoverflow.com/questions/3334729 / ... . Garantisce per mostrare una superficie di almeno due volte il valore di offset in gradi.

const center = bounds.getCenter()
const offset = 0.01
const northEast = new google.maps.LatLng(
    center.lat() + offset,
    center.lng() + offset
)
const southWest = new google.maps.LatLng(
    center.lat() - offset,
    center.lng() - offset
)
const minBounds = new google.maps.LatLngBounds(southWest, northEast)
map.fitBounds(bounds.union(minBounds))