fitbounds() dans Google Maps api V3 ne correspond pas aux limites

J'utilise le géocodeur de Google API v3 pour afficher une carte d'un pays. Je reçois la fenêtre d'affichage recommandée pour le pays, mais lorsque je veux ajuster la carte à cette fenêtre, cela ne fonctionne pas (voir les limites avant et après l'appel de la fonction fitBounds dans le code ci-dessous).fitbounds() dans Google Maps api V3 ne correspond pas aux limites

Qu'est-ce que je fais mal?

Comment puis-je définir la fenêtre d'affichage de ma carte sur 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)) 
    } 
);

Source

2010-03-22 jul

Cela se produit parce que le fitBounds() doit accrocher à une fenêtre qui correspond à la toile de carte en utilisant le niveau de zoom maximum. D'un autre côté, la fenêtre renvoyée par le géocodeur ne dépend pas de la taille, de la mise en page ou du niveau de zoom de la toile de carte. Par conséquent, la méthode fitBounds() ajuste la fenêtre d'affichage de la carte afin de voir le LatLngBounds passé au complet au centre de la carte.

Vous pouvez vérifier 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 zone de délimitation rouge est la fenêtre renvoyée par le géocodeur. Notez la différence entre la zone de délimitation et la fenêtre réelle, telle que modifiée par fitBounds():

Pays: États-Unis

Pays: RU

Pays: IT

Source

2010-03-22 23:45:16

Merci Daniel. – jul

J'ai eu du mal à comprendre comment faire cela aussi, explication détaillée génial! – designermonkey

Merci beaucoup pour l'explication approfondie. Le boundingBox était une excellente idée pour le rendre clair. – Symmetric

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

un échantillon avec juste fitBounds : http://jsbin.com/cakuhaca/1/edit
un échantillon quand vous ne vous inquiétez pas que toute la fenêtre est visible et un zoom toujours dans un niveau plus: http://jsbin.com/rofupidi/1/edit
un échantillon lorsque vous souciez que si le stip de e La boîte englobante que vous perdez est plus de X pixels horizontalement ou verticalement http://jsbin.com/rezapuye/1/edit

Source

2012-10-30 10:49:08 kaskader

:(Ce lien est mort –

fixe avec un lien plus permanent – kaskader

morts à nouveau ..... –

fitbounds() dans Google Maps api V3 ne correspond pas aux limites

Répondre

Questions connexes