FitBounds () no Google Maps API V3 não se encaixa nos limites

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

Pergunta

Estou usando o geocoder do Google API V3 para exibir um mapa de um país. Recebo a viewport recomendada para o país, mas quando quero encaixar o mapa nessa viewport, ele não funciona (consulte os limites antes e depois de chamar as funções FitBounds no código abaixo).

O que estou fazendo errado?

Como posso definir a viewport do meu mapa para 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))
    }
);
Foi útil?

Solução

Isso acontece porque o fitBounds() precisa se encaixar em uma viewport que se encaixa na tela do mapa usando o nível máximo de zoom possível. Por outro lado, a viewport retornada pelo geocoder não depende do tamanho, layout ou nível de zoom da tela do mapa. Portanto, o fitBounds() o método ajusta a viewport do mapa para visualizar o passado LatLngBounds na íntegra no centro do mapa.

Você pode verificar o exemplo a seguir para um Demonstation mais claro:

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

Abaixo estão algumas capturas de tela para vários países do exemplo acima. A caixa delimitadora vermelha é a viewport retornada pelo geocoder. Observe a diferença entre a caixa delimitadora e a visualização real, conforme ajustado por fitBounds():

País: nós

US

País: ru

RU

País: isso

IT

Outras dicas

Só para que você saiba de que maneira isso pode ser personalizado, preparei uma amostra do que você pode fazer se preferir perder parte do BoundingBox na viewport

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top