在Flex中使用GoogleMap

    在Flex中使用GoogleMap，可以让自己的网站有地图功能，够吸引人。HelloWorld程序网上有很多，这里推荐一个mm写滴（http://liuyanttkl.iteye.com/blog/196103 ），步骤介绍得很详细，也提拱了sdk的下载。赞一个！！

    去翻了一下其中的文档，想利用它做个火炬传递的Demo，这样一站接一站的在地图上动画展示，一定不错，不过现在还没实现。哈 。

   将上面链接里的程序稍微改进一点，加上一点Control，用于导航，google提拱的Control全放在 com.google.maps.controls包里面，有地点控制，大小控制，地图类型控制，以及OverView控制。把它们都加到地图里面去。改 写她的onMapReady()方法，加上四个addControl()即可。代码如下：

Xml代码

1. <? xml   version = "1.0"   encoding = "utf-8" ?>     
2. < mx:Application   xmlns:mx = "http://www.adobe.com/2006/mxml"   layout = "absolute"   width = "100%"   height = "100%" >     
3.     
4.     < mx:UIComponent   id = "mapContainer"      
5.         initialize = "startMap(event);"      
6.       resize = "resizeMap(event)"      
7.       width = "100%"   height = "100%" />     
8.       
9.    < mx:Script >     
10.      <![CDATA[  
11.         import com.google.maps.controls.MapTypeControlOptions;  
12.         import com.google.maps.controls.MapTypeControl;  
13.         import com.google.maps.controls.ZoomControlOptions;  
14.         import com.google.maps.controls.ZoomControl;  
15.         import com.google.maps.controls.OverviewMapControlOptions;  
16.         import com.google.maps.controls.OverviewMapControl;  
17.         import com.google.maps.controls.PositionControlOptions;  
18.         import com.google.maps.controls.PositionControl;    
19.        
20.        
21.  import flash.events.Event;    
22.  import com.google.maps.MapEvent;    
23.  import com.google.maps.Map;    
24.  import com.google.maps.MapType;    
25.  import com.google.maps.LatLng;    
26.      
27.    private var map:Map;    
28.  
29.    public function startMap(event:Event):void {    
30.      map = new Map();    
31.      map.addEventListener(MapEvent.MAP_READY, onMapReady);    
32.      mapContainer.addChild(map);    
33.      map.key="ABQIAAAAIhwqRCxr2Hd_iUrIB7KzdxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR4G7tD76snbpNjQ3DrJkhKe_noZg";    
34.    }    
35.            
36.    public function resizeMap(event:Event):void {    
37.      map.setSize(new Point(mapContainer.width, mapContainer.height));    
38.    }    
39.        
40.    private function onMapReady(event:MapEvent):void {              
41.      map.setCenter(new LatLng(39.92,116.46)/*北京的经纬度*/, 14, MapType.SATELLITE_MAP_TYPE/*卫星图模式*/);  
42.      //加上一些Control       
43.      map.addControl( new PositionControl( new PositionControlOptions() ) );  
44.      map.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) );  
45.      map.addControl( new ZoomControl( new  ZoomControlOptions() ) );  
46.      map.addControl( new MapTypeControl( new MapTypeControlOptions() ) );  
47.        
48.    }    
49.      ]]>     
50.    </ mx:Script >     
51.  </ mx:Application >     

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">  
  
    <mx:UIComponent id="mapContainer"   
        initialize="startMap(event);"   
      resize="resizeMap(event)"   
      width="100%" height="100%"/>  
    
   <mx:Script>  
     <![CDATA[
     	import com.google.maps.controls.MapTypeControlOptions;
     	import com.google.maps.controls.MapTypeControl;
     	import com.google.maps.controls.ZoomControlOptions;
     	import com.google.maps.controls.ZoomControl;
     	import com.google.maps.controls.OverviewMapControlOptions;
     	import com.google.maps.controls.OverviewMapControl;
     	import com.google.maps.controls.PositionControlOptions;
     	import com.google.maps.controls.PositionControl;  
     
     
 import flash.events.Event;  
 import com.google.maps.MapEvent;  
 import com.google.maps.Map;  
 import com.google.maps.MapType;  
 import com.google.maps.LatLng;  
   
   private var map:Map;  

   public function startMap(event:Event):void {  
     map = new Map();  
     map.addEventListener(MapEvent.MAP_READY, onMapReady);  
     mapContainer.addChild(map);  
     map.key="ABQIAAAAIhwqRCxr2Hd_iUrIB7KzdxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR4G7tD76snbpNjQ3DrJkhKe_noZg";  
   }  
         
   public function resizeMap(event:Event):void {  
     map.setSize(new Point(mapContainer.width, mapContainer.height));  
   }  
     
   private function onMapReady(event:MapEvent):void {     	   	 
     map.setCenter(new LatLng(39.92,116.46)/*北京的经纬度*/, 14, MapType.SATELLITE_MAP_TYPE/*卫星图模式*/);
     //加上一些Control     
     map.addControl( new PositionControl( new PositionControlOptions() ) );
     map.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) );
     map.addControl( new ZoomControl( new  ZoomControlOptions() ) );
     map.addControl( new MapTypeControl( new MapTypeControlOptions() ) );
     
   }  
     ]]>  
   </mx:Script>  
 </mx:Application>  

 

这样地图就有了导航功能了：

 

 

里面有一些"DEBUG MODE "，这里因为直接在本地运行的缘故。将flex放到tomcat里去，它就不会出现了。不过这个"DEBUG MODE "不会碍什么事的，也不讨厌。