2012-04-22 3 views
52

Ich habe diesen Code, der eine Karte rendert.Google Maps API V3-Methode 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); 

    } 

Auch wenn die beiden Punkte von 25 km getrennt sind erhalte ich dieses Ergebnis:

enter image description here

Während Ich mag würde ein höheres Maß Zoom machen.

Gefällt Ihnen dieses

enter image description here

ich die Methode fitBounds verwenden()

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

Vielen Dank für Ihre Unterstützung

Antwort

119

Dies geschieht, weil LatLngBounds() nicht zwei beliebige Punkte nimmt als Parameter, aber SW und NE Punkte

verwenden, um die .extend() Methode auf einem leeren Grenzen Objekt

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

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

29

LatLngBounds müssen mit Punkten in (Süd-West, Nord-Ost) definiert werden. Deine Punkte sind nicht in dieser Reihenfolge.

Die allgemeine Lösung, vor allem wenn man die Punkte nicht wissen, wird auf jeden Fall in dieser Reihenfolge sein, ist eine leere Grenzen zu erweitern:

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

Die API die Grenzen aussortieren wird.

+7

Hah! Ich habe mich nur geschlagen. iPad-Tastaturen machen schnelles Tippen nicht einfach. –

18

Ich habe das gleiche Problem, das Sie beschreiben, obwohl ich meine LatLngBounds wie von oben vorgeschlagen aufbaue. Das Problem ist, dass die Dinge sind async und map.fitBounds() zur falschen Zeit aufrufen können Sie mit einem Ergebnis lassen wie in der Q. Der beste Weg, fand ich den Anruf in einem Ruhe Handler wie folgt zu platzieren:

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

Danke, das war eine große Hilfe für mich, weil ich Adressen an Koordinaten geocodiert habe, und dann auf diese Koordinaten abbilde, aber es hat nicht funktioniert – andrewtweber

+0

Ich habe ein ähnliches Problem aufgrund der HTML-Code noch nicht beim Aufruf angezeigt 'fitBounds()', so konnte sich das Zoomen offensichtlich nicht bemerkbar machen. Stellen Sie sicher, dass die Karte zuerst angezeigt wurde, bevor Sie versuchen zu zoomen. – stevo

+1

HUUUGE Hilfe, danke für diese Antwort –

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 es funktioniert für mich. Danke @MAMASSi –