Auto ajuste de Posição e Zoom no Google Maps em Adobe Flex

Essa dica vai para quem trabalha com a API do Google Maps para Flex (que aliás não será continuada pelo Google depois que a Adobe jogou a toalha na guerra contra a Apple). A dica também vale para as API´s de outras linguagens.

Após criar uma série de elementos no seu mapa, como marcas ou polígonos, é comum você querer visualizar todos os elementos de uma só vez. Para tanto é necessário identificar a coordenada de latitude e longitude que representa o centro entre todas suas coordendas e identificar o melhor nível de zoom para que todos os elementos fiquem visíveis.

Por sorte a API já possibilita fazer isso de forma automática utilizando a classe LatLngBounds.

Basta criar um loop para ler todas suas coordenadas e executar o método extend da classe LatLngBounds, passando como parâmetro um LatLng.

for each (var coor:XML in coordenadas.coordenada) {
 var latlng:LatLng = new LatLng(<a href="mailto:coor.@lat">coor.@lat</a>, <a href="mailto:coor.@long">coor.@long</a>);  
 latlngbounds.extend( latlng ); 
}

Após isso, a classe LatLngBounds retorna o ponto central através do método getCenter e o melhor nível de zoom através do método getBoundsZoomLevel. Em seguida é só chamar o método setCenter do seu map, passando estes valores como seus parâmetros.

map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );

Realmente muito fácil!

Em seguida meu código completo para o exemplo. Abraços!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a>" layout="absolute" xmlns:ns1="com.google.maps.*">
 <mx:Script>    
  <![CDATA[
   import com.google.maps.controls.ZoomControl;
   import com.google.maps.controls.PositionControl;
   import com.google.maps.overlays.Marker;
   import com.google.maps.LatLngBounds;        
  
   import com.google.maps.LatLng;    
   import com.google.maps.Map;    
   import com.google.maps.MapEvent;    
   import com.google.maps.MapType; 
   
   private var coordenadas:XML =  <Coordenadas>
            <coordenada lat="40.725536353580054" long="-74.0279584510972"/>
            <coordenada lat="40.73699441500612" long="-73.95928881794303"/>
            <coordenada lat="40.74114835218548" long="-74.00160709841569"/>
            <coordenada lat="40.732606151031106" long="-73.96607223885681"/>
            <coordenada lat="40.72625822524804" long="-74.03205298109546"/>
            <coordenada lat="40.72575598523321" long="-74.02672837265969"/>
            <coordenada lat="40.74094766828434" long="-74.02550009149331"/>
            <coordenada lat="40.74386527348633" long="-73.99121805396857"/>
            <coordenada lat="40.72263440857748" long="-73.9793768120008"/>
            <coordenada lat="40.73356963372927" long="-74.02600361168126"/>
           </Coordenadas>;   
   
   private function onMapReady(event:Event):void {      
    
    this.map.addControl(new PositionControl());
    map.addControl(new ZoomControl());
    this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);  
    
    for each (var coor:XML in coordenadas.coordenada) {
     var latlng:LatLng = new LatLng(<a href="mailto:coor.@lat">coor.@lat</a>, <a href="mailto:coor.@long">coor.@long</a>);  
     map.addOverlay(new Marker(latlng));         
    }
     
   } 
   
   private function zoomToFit():void {
    
    var latlngbounds:LatLngBounds = new LatLngBounds();
    
    for each (var coor:XML in coordenadas.coordenada) {
     var latlng:LatLng = new LatLng(<a href="mailto:coor.@lat">coor.@lat</a>, <a href="mailto:coor.@long">coor.@long</a>);  
     latlngbounds.extend( latlng ); 
    }
    map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );

   }  
   
  ]]>
 </mx:Script>

 <mx:Button label="Ajustar..." left="10" top="10" click="zoomToFit()"/>

 <ns1:Map top="40" bottom="10" left="10" right="10"  id="map" mapevent_mapready="onMapReady(event)" sensor="false"
  key=""/>
 
</mx:Application>

Publicidade