fitbounds () in Google Maps V3 api nicht fit Grenzen

StackOverflow https://stackoverflow.com/questions/2494756

Frage

Ich bin mit dem Geocoder von Google-API v3 eine Karte eines Landes anzuzeigen. Ich erhalte die empfohlenen Darstellungs für das Land, aber wenn ich die Karte zu diesem Ansichtsfenster passen will, ist es nicht funktioniert (siehe die Grenzen vor und nach dem fitBounds Aufruf in den unten stehenden Code-Funktion).

Was mache ich falsch?

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

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))
    }
);
War es hilfreich?

Lösung

Dies geschieht, weil die fitBounds() Bedürfnisse zu einem Ansichtsfenster schnappen, dass paßt die Karte Leinwand, um die maximale Zoomstufe möglich verwenden. Auf der anderen Seite, das Ansichtsfenster durch den Geocoder zurückgegeben wird, ist nicht abhängig von der Größe, Layout oder Zoomstufe der Karte Leinwand. Deshalb ist die fitBounds() Methode der Karte des Ansichtsfenster einstellt, um die übergebenen LatLngBounds in vollem Umfang 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. Der rote Begrenzungsrahmen ist das Darstellungsfeld durch die geocoder zurückgegeben. Beachten Sie den Unterschied zwischen dem Begrenzungsrahmen und dem eigentlichen Ansichtsfenster, wie fitBounds() eingestellt:

Land: US

US

Land: RU

RU

Land: IT

IT

Andere Tipps

Nur, damit Sie wissen, in welcher Weise dies kann angepasst werden, den ich bereitet habe eine Probe von dem, was Sie tun können, wenn Sie es vorziehen, einige der boundingBox im Ansichtsfenster

verlieren
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top