2010-03-22 1 views
31

Ich verwende den Geocoder von Google API v3, um eine Karte eines Landes anzuzeigen. Ich bekomme das empfohlene Ansichtsfenster für das Land, aber wenn ich die Karte in dieses Ansichtsfenster anpassen möchte, funktioniert es nicht (siehe die Grenzen vor und nach dem Aufruf der Funktion fitBounds im folgenden Code).fitbounds() in Google Maps api V3 passt nicht Grenzen

Was mache ich falsch?

Wie kann ich das Ansichtsfenster meiner Karte auf results[0].geometry.viewport einstellen?

var geocoder = new google.maps.Geocoder(); 
geocoder.geocode(
    {'address': '{{countrycode}}'}, 
    function(results, status) { 
     var bounds = new google.maps.LatLngBounds(); 
     bounds = results[0].geometry.viewport; 
     console.log(bounds);   // ((35.173, -12.524), (45.244, 5.098)) 
     console.log(map.getBounds()); // ((34.628, -14.683), (58.283, 27.503)) 
     map.fitBounds(bounds);    
     console.log(map.getBounds()); // ((25.740, -24.806), (52.442, 17.380)) 
    } 
); 

Antwort

72

Dies geschieht, weil die fitBounds() zu einem Ansichtsfenster schnappen muss, die die Karte Leinwand passt die maximale Zoomstufe möglich verwenden. Auf der anderen Seite hängt das vom Geocoder zurückgegebene Ansichtsfenster nicht von der Größe, dem Layout oder der Zoomstufe des Kartenbereichs ab. Daher passt die fitBounds() Methode das Ansichtsfenster der Karte an, um die übergebenen LatLngBounds vollständig in der Mitte der Karte anzuzeigen.

Sie können das folgende Beispiel für eine klarere Demonstration überprüfen:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps fitBounds Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 500px; height: 350px"></div> 

    <script type="text/javascript"> 
     var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 
     var geocoder = new google.maps.Geocoder(); 

     geocoder.geocode({'address': 'RU'}, function (results, status) { 
     var ne = results[0].geometry.viewport.getNorthEast(); 
     var sw = results[0].geometry.viewport.getSouthWest(); 

     map.fitBounds(results[0].geometry.viewport);    

     var boundingBoxPoints = [ 
      ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
      sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
     ]; 

     var boundingBox = new google.maps.Polyline({ 
      path: boundingBoxPoints, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     boundingBox.setMap(map); 
     }); 
    </script> 
</body> 
</html> 

Im Folgenden sind einige Screenshots für verschiedene Länder aus dem obigen Beispiel. Die rote Begrenzungsbox ist das vom Geocodierer zurückgegebene Ansichtsfenster. Beachten Sie den Unterschied zwischen dem Begrenzungsrahmen und dem eigentlichen Ansichtsfenster, wie fitBounds() eingestellt:

Land: US

US

Land: RU

RU

Land: IT

IT

+0

Danke Daniel. – jul

+0

Ich hatte Probleme zu verstehen, wie man das auch macht, super detaillierte Erklärung! – designermonkey

+0

Vielen Dank für die gründliche Erklärung. Die BoundingBox war eine großartige Idee, um das klar zu machen. – Symmetric

2

Nur, damit Sie in welcher Weise weiß, das individuell angepasst werden kann, habe ich eine Probe vorbereitet haben, was Sie tun können, wenn Sie es vorziehen, mit nur einige der boundingBox im Ansichtsfenster

+1

:(Diese Verbindung ist tot. –

+2

behoben mit einer permanenteren Verbindung – kaskader

+4

tot wieder ..... –