2012-04-22 20 views
52

Ho questo codice che esegue il rendering di una mappa.Google Maps API V3 method fitBounds()

function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(45.4555729, 9.169236), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 

panControl: true, 
mapTypeControl: false, 
panControlOptions: { 
      position: google.maps.ControlPosition.RIGHT_CENTER 
     }, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.RIGHT_CENTER 
}, 
scaleControl: false, 
streetViewControl: false, 
streetViewControlOptions: { 
    position: google.maps.ControlPosition.RIGHT_CENTER 
      } 
     }; 
    var map = new google.maps.Map(document.getElementById("mapCanvas"), 
     myOptions); 



var Item_1 = new google.maps.LatLng(45.5983128 ,8.9172776); 

var myPlace = new google.maps.LatLng(45.4555729, 9.169236); 

var marker = new google.maps.Marker({ 
    position: Item_1, 
    map: map}); 

var marker = new google.maps.Marker({ 
    position: myPlace, 
    map: map}); 

var bounds = new google.maps.LatLngBounds(myPlace, Item_1); 
map.fitBounds(bounds); 

    } 

Anche se i due punti sono separati da 25 km ottengo questo risultato:

enter image description here

Mentre vorrei rendere uno zoom livello superiore.

Ti piace questa

enter image description here

Io uso il metodo fitBounds()

var bounds = new google.maps.LatLngBounds(myPlace, Item_1); 
    map.fitBounds(bounds); 

Grazie per il vostro sostegno

risposta

119

Questo accade perché LatLngBounds() non prende due punti arbitrari come parametri, ma i punti SW e NE

utilizzare il metodo .extend() su un gigante vuoti opporsi

var bounds = new google.maps.LatLngBounds(); 
bounds.extend(myPlace); 
bounds.extend(Item_1); 
map.fitBounds(bounds); 

Demo a http://jsfiddle.net/gaby/22qte/

29

LatLngBounds deve essere definita con punti (a sud-ovest, nord-est) ordine. I tuoi punti non sono in questo ordine.

La correzione generale, soprattutto se non si conoscono i punti saranno sicuramente in questo ordine, è quello di estendere un limite vuote:

var bounds = new google.maps.LatLngBounds(); 
bounds.extend(myPlace); 
bounds.extend(Item_1); 
map.fitBounds(bounds); 

L'API risolvere i limiti.

+7

Hah! Ci siamo appena battuti. Le tastiere iPad non semplificano la digitazione veloce. –

18

Ho lo stesso problema che descrivi anche se sto costruendo il mio LatLngBounds come proposto sopra. Il problema è che le cose sono asincrone e chiamando map.fitBounds() al momento sbagliato può lasciare con un risultato come in Q. Il modo migliore che ho trovato è quello di mettere la chiamata in un gestore di inattività in questo modo:

google.maps.event.addListenerOnce(map, 'idle', function() { 
    map.fitBounds(markerBounds); 
}); 
+1

Grazie, questo è stato un grande aiuto per me perché stavo geocoding gli indirizzi ai coords e quindi mappavo a quei coords, ma non funzionava – andrewtweber

+0

Ho riscontrato un problema simile a causa del contenuto HTML che non veniva ancora visualizzato durante la chiamata 'fitBounds()', quindi a quanto pare lo zoom non è riuscito a capire se stesso. Assicurarsi che la mappa fosse visualizzata per prima, prima di provare a ingrandirla, mi ha aiutato. – stevo

+1

HUUUGE aiuto, grazie per questa risposta –

6
var map = new google.maps.Map(document.getElementById("map"),{ 
       mapTypeId: google.maps.MapTypeId.ROADMAP 

      }); 
var bounds = new google.maps.LatLngBounds(); 

for (i = 0; i < locations.length; i++){ 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 
bounds.extend(marker.position); 
} 
map.fitBounds(bounds); 
+2

Cool funziona per me. Grazie a @MASSASSI –

Problemi correlati