(fitbounds) dans Google Maps API V3 ne correspond pas limites

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

Question

J'utilise le géocodage de Google API v3 pour afficher une carte d'un pays. Je reçois la fenêtre recommandée pour le pays, mais quand je veux adapter la carte à cette fenêtre, il ne fonctionne pas (voir les limites avant et après l'appel de la fonction fitBounds dans le code ci-dessous).

Qu'est-ce que je fais mal?

Comment définir la fenêtre de ma carte à results[0].geometry.viewport? 

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))
    }
);
Était-ce utile?

La solution

Cela se produit parce que le fitBounds() doit casser une fenêtre qui correspond à la toile de carte en utilisant le niveau de zoom maximum. D'autre part, la fenêtre retournée par le géocodage ne dépend pas de la taille, la mise en page ou niveau de zoom de la toile de la carte. Par conséquent, la méthode fitBounds() ajuste la fenêtre de la carte pour voir le LatLngBounds passé en totalité au centre de la carte.

Vous pouvez consulter l'exemple suivant pour une demonstation plus claire: 

<!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>

Voici quelques captures d'écran pour les différents pays de l'exemple ci-dessus. La boîte rouge est la fenêtre retournée par le géocodage. Notez la différence entre la zone de délimitation et la fenêtre réelle, modifié par fitBounds():

Pays: Etats-Unis

US

Pays: RU

RU

Pays: IT

IT

Autres conseils

Juste pour vous faire savoir de quelle manière cela peut être personnalisé, je vous ai préparé un échantillon de ce que vous pouvez faire si vous préférez perdre une partie de la boundingBox dans la fenêtre

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top