Flex中嵌入Google地图

本文将介绍如何使用Flex Builder建立一个Flex内嵌Google Map的例子。首先呢,先下载 Google Maps SDK 【解压到某个文件夹内,找到lib内的map_flex_1_1.swc,到时候需要导入Project中 】,以及去申请一个developers API key .【申请的时候需要填写网页地址:如果你使用本地的连接测试:比如http://localhost:8080/GoogleMap ,这样填写就好了,GoogleMap是我们将要建立的一个Flex Project 名字】。打开Flex Builder,新建Flex Project【File > New Flex Project】:GoogleMap 。我使用的BlazeDS建立我的Web形式的Application【使用的服务器是J2EE】。这样最后建立好之后,需要导入map_flex_1_1.swc【右键点击GoogleMap-properties--Flex build path--library path--add swc..】

之后就可以开始我们的Google Map之旅了。

Java代码 复制代码
  1. ?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
  3.   width="100%" height="100%" initialize="init()">   
  4.            
  5.     <mx:Script>   
  6.         <![CDATA[   
  7.                    
  8.         ]]>   
  9.     </mx:Script>   
  10.            
  11.     <mx:UIComponent id="mapContainer" width="100%" height="100%"/>   
  12.        
  13. </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%" initialize="init()">
        
    <mx:Script>
        <![CDATA[
                
        ]]>
    </mx:Script>
        
    <mx:UIComponent id="mapContainer" width="100%" height="100%"/>
    
</mx:Application>

 代码中添加了一个标记<mx:UTComponent>制定了宽度和高度,其实这里的id="mapContainer"就是装入GoogleMap的一个容器。你必须指定一个唯一的id,否则Flex无法识别加载。接着下载需要的packet.

Java代码 复制代码
  1. import com.google.maps.Map;   
  2. import com.google.maps.MapEvent;   
  3. import com.google.maps.MapType;   
  4. import com.google.maps.LatLn  
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLn

 紧接着定义一个变量指向google map 的一个实例。

Java代码 复制代码
  1. private var gMap:Map;  
private var gMap:Map;

 接下来就开始定义一个init()的函数,该函数在Flex程序被加载的时候被调用,用来完成程序的实例创建以及属性的配置。当这些都被设置好了之后,你要在地图被完全加载的时候创建一个event handler来把地图潜入mapContainer指定的位置。

Java代码 复制代码
  1. private function init():void  
  2. {   
  3.     gMap = new Map();   
  4.     gMap.key = "{YOUR_API_KEY_HERE}";   
  5.     gMap.width = 600;   
  6.     gMap.height = 400;   
  7.     gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);   
  8.        
  9.     mapContainer.addChild(gMap);   
  10. }  
private function init():void
{
    gMap = new Map();
    gMap.key = "{YOUR_API_KEY_HERE}";
    gMap.width = 600;
    gMap.height = 400;
    gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
    
    mapContainer.addChild(gMap);
}

 最后就是在map完全加载的时候定义的event handler,指定了显示地图的坐标以及设置应用程序的大小。完整的代码:

Java代码 复制代码
  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%" initialize="init()" viewSourceURL="srcview/index.html">   
  3.        
  4.     <mx:Script>   
  5.         <![CDATA[   
  6.                
  7.             import com.google.maps.Map;   
  8.             import com.google.maps.MapEvent;   
  9.             import com.google.maps.MapType;   
  10.             import com.google.maps.LatLng;   
  11.                
  12.             private var gMap:Map;   
  13.                
  14.             private function init():void  
  15.             {   
  16.                 gMap = new Map();   
  17.                 gMap.key = "你申请的key";   
  18.                 gMap.width = 600;   
  19.                 gMap.height = 400;   
  20.                 gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);   
  21.                    
  22.                 mapContainer.addChild(gMap);   
  23.             }   
  24.                
  25.             private function mapReadyHandler(e:MapEvent):void  
  26.             {   
  27.                 gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);   
  28.                 gMap.setSize(new Point(mapContainer.width, mapContainer.height));   
  29.             }   
  30.                
  31.         ]]>   
  32.     </mx:Script>   
  33.        
  34.     <mx:UIComponent id="mapContainer" width="100%" height="100%"/>   
  35.        
  36. </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%" initialize="init()" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            
            import com.google.maps.Map;
            import com.google.maps.MapEvent;
            import com.google.maps.MapType;
            import com.google.maps.LatLng;
            
            private var gMap:Map;
            
            private function init():void
            {
                gMap = new Map();
                gMap.key = "你申请的key";
                gMap.width = 600;
                gMap.height = 400;
                gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
                
                mapContainer.addChild(gMap);
            }
            
            private function mapReadyHandler(e:MapEvent):void
            {
                gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
                gMap.setSize(new Point(mapContainer.width, mapContainer.height));
            }
            
        ]]>
    </mx:Script>
    
    <mx:UIComponent id="mapContainer" width="100%" height="100%"/>
    
</mx:Application>
 

编译执行【http://localhost:8080/GoogleMap/GoogleMap.html 】你就会看到demo中的效果了。但是如果你使用的不是http这种浏览方式,比如是file:/// 等看到的图片可能会有debug的符号:

但是都不影响它的其他功能。

原创作者:mkeefe 。翻译整理:一路风尘
阅读更多

没有更多推荐了,返回首页