google maps API 3 ingrandisce su fitBounds

Question

Ho incontrato un problema in cui chiamare map.fitBounds sembra ridurre. Sto cercando di utilizzare il router backbone.js per salvare i limiti della mappa nell'URL. Voglio essere in grado di aggiungere l'URL ai segnalibri e in seguito avere la mappa esattamente uguale.

Ho notato che chiamare map.fitBounds(map.getBounds()) nella console farà sempre lo zoom indietro. Dove vorrei che non cambiasse la mappa.

È normale? Come posso fare in modo che la mappa appaia uguale da una fase all'altra?

Grazie

Answer 1

Questo problema di Google Map API è stata discussa più volte. Vedere:

• gmaps-api-issues
• google-maps-js-api-v3 group

Funzione map.fitBounds() imposta la finestra per contenere i limiti. Ma la funzione map.getBounds() restituisce i limiti della vista con un margine extra (si noti che questo è un comportamento normale e nessun bug). I bordi ingranditi non si adattano più alla vista precedente, quindi la mappa viene ingrandita.

Una soluzione semplice al tuo problema è utilizzare il centro mappa e il livello di zoom. Vedere le funzioni map.getCenter(), map.setCenter(), map.getZoom() e map.setZoom().

Answer 2

Ho notato anche questo problema. La mia soluzione è di confrontare map.getBounds() con ciò a cui sto impostando i limiti; se sono uguali, sto saltando la chiamata map.fitBounds().

Answer 3

risoluzione di questo problema nel 2017

Shrink il rettangolo di selezione un po 'prima di inviarlo al map.fitBounds().

Ecco una funzione di compattare un riquadro:

// Values between 0.08 and 0.28 seem to work 
// Any lower and the map will zoom out too much 
// Any higher and it will zoom in too much 
var BOUNDS_SHRINK_PERCENTAGE = 0.08; // 8% 

/** 
* @param {google.maps.LatLngLiteral} southwest 
* @param {google.maps.LatLngLiteral} northeast 
* @return {Array[google.maps.LatLngLiteral]} 
*/ 
function slightlySmallerBounds(southwest, northeast) { 
    function adjustmentAmount(value1, value2) { 
    return Math.abs(value1 - value2) * BOUNDS_SHRINK_PERCENTAGE; 
    } 

    var latAdjustment = adjustmentAmount(northeast.lat, southwest.lat); 
    var lngAdjustment = adjustmentAmount(northeast.lng, southwest.lng); 

    return [ 
    {lat: southwest.lat + latAdjustment, lng: southwest.lng + lngAdjustment}, 
    {lat: northeast.lat - latAdjustment, lng: northeast.lng - lngAdjustment} 
    ] 
} 

usare in questo modo:

// Ensure `southwest` and `northwest` are objects in google.maps.LatLngLiteral form: 
// southwest == {lat: 32.79712, lng: -117.13931} 
// northwest == {lat: 32.85020, lng: -117.09356} 

var shrunkBounds = slightlySmallerBounds(southwest, northeast); 
var newSouthwest = shrunkBounds[0]; 
var newNortheast = shrunkBounds[1]; 

// `map` is a `google.maps.Map` 
map.fitBounds(
    new google.maps.LatLngBounds(newSouthwest, newNortheast) 
); 

Ho un app che fa la stessa cosa di codr: salvare i limiti della mappa in corso nel URL e inizializzazione della mappa dai limiti URL all'aggiornamento. Questa soluzione funziona meravigliosamente per questo.

Perché funziona?

Google Maps fa essenzialmente questo quando fitBounds() si chiama:

1. Centro la mappa sul punto centrale di un dato rettangolo di selezione.
2. Ingrandire il livello di zoom massimo in cui il riquadro di visualizzazione dovrebbe contenere i limiti all'interno di della finestra di visualizzazione.

Se i limiti indicati sarebbero esattamente corrispondere alla finestra, Google Maps non ritiene che come "contenente" i limiti, in modo che riduce la mappa di un livello.

Answer 4

Per le persone che vedono questa domanda nel 2018, Google Maps API v3 ora supporta un secondo argomento padding che specifica la quantità di riempimento da includere attorno ai limiti specificati.

Per evitare lo zoom, è sufficiente chiamare lo fitBounds con una spaziatura di 0. Per questo esempio sarebbe map.fitBounds(map.getBounds(), 0)