Google Maps API V3-Methode fitBounds()

Question

Ich habe diesen Code, der eine Karte rendert.

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:

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

Gefällt Ihnen dieses

ich die Methode fitBounds verwenden()

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

Vielen Dank für Ihre Unterstützung

Answer 1

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/

Answer 2

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.

Answer 3

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

Answer 4

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