fitbounds() en la api de Google maps V3 no se ajuste a los límites

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

Pregunta

Estoy usando el geocoder de Google API v3 para mostrar un mapa de un país.Me sale el recomendado de la ventanilla para el país, pero cuando quiero caber en el mapa a este punto, no funciona (ver los límites, antes y después de llamar a la fitBounds función en el código de abajo).

¿Qué estoy haciendo mal?

¿Cómo puedo establecer la ventanilla de mi mapa 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))
    }
);
¿Fue útil?

Solución

Esto sucede porque las necesidades fitBounds() que se ajustan a una ventana que llena el lienzo mapa utilizando el nivel de zoom máximo posible. Por otro lado, el área de visualización devuelto por el codificador geográfico no depende del nivel de tamaño, la disposición o el zoom de la vista del mapa. Por lo tanto el método fitBounds() ajusta ventana gráfica del mapa con el fin de ver el LatLngBounds aprobada en su totalidad en el centro del mapa.

Es posible que desee comprobar el siguiente ejemplo para una demonstración clara: 

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

A continuación se presentan algunas capturas de pantalla para varios países en el ejemplo anterior. El cuadro rojo es la vista devuelta por el geocodificador. Tenga en cuenta la diferencia entre el cuadro delimitador y la ventana gráfica actual, adaptado por fitBounds():

País: Estados Unidos

US

País: RU

RU

País: IT

ES

Otros consejos

Sólo para hacerle saber de qué manera esto puede ser personalizado, he preparado una muestra de lo que puede hacer si usted prefiere perder algunos de los boundingBox en el viewport

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top