javascript google - Centro / Imposta lo zoom della mappa per coprire tutti i marker visibili?




title maps (5)

La dimensione dell'array deve essere maggiore di zero. In tal caso si avranno risultati inaspettati.

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

Sto impostando più marker sulla mia mappa e posso impostare staticamente i livelli di zoom e il centro, ma quello che voglio è, per coprire tutti i marker e zoom il più possibile avendo tutti i mercati visibili

I metodi disponibili stanno seguendo

setZoom(zoom:number)

e

setZoom(zoom:number)

setCenter supporta più setCenter posizione o array di località, né setZoom ha questo tipo di funzionalità


Per estendere la risposta data con alcuni trucchi utili:

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

AGGIORNARE:
Ulteriori ricerche sull'argomento mostrano che fitBounds () è un asincronico ed è meglio fare una manipolazione Zoom con un listener definito prima di chiamare Fit Bounds.
Grazie a @Tim, @ xr280xr, altri esempi sull'argomento: 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);

È disponibile questa utility lato client di MarkerClusterer per Google Map come specificato qui negli articoli dello sviluppatore di Google Map , qui è breve su quale è il suo utilizzo:

Ci sono molti approcci per fare ciò che hai chiesto:

  • Raggruppamento basato su griglia
  • Cluster basato sulla distanza
  • Gestione degli indicatori di Viewport
  • Tavoli Fusion
  • Marker Clusterer
  • MarkerManager

Puoi leggere su di loro sul link fornito sopra.

Marker Clusterer utilizza il clustering basato sulla griglia per raggruppare tutti i marker che desiderano la griglia. Il clustering basato sulla griglia funziona dividendo la mappa in quadrati di una certa dimensione (la dimensione cambia ad ogni zoom) e quindi raggruppando i marker in ogni quadrato della griglia.

Prima del clustering

Dopo il raggruppamento

Spero che questo sia quello che stavi cercando e questo risolverà il tuo problema :)


È necessario utilizzare il metodo fitBounds() .

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

map.fitBounds(bounds);

setZoom(zoom:number) :


window.open('page.html', '_newtab');

Specificare "_newtab". Funziona in IE e FF e dovrebbe funzionare in Chrome. Ma se l'utente ha le cose configurate per non aprirsi in una nuova scheda, non si può fare molto.





javascript google-maps-api-3