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

<?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 "不会碍什么事的，也不讨厌。