在Flex中使用GoogleMap

最新推荐文章于 2014-04-28 18:24:54 发布

最新推荐文章于 2014-04-28 18:24:54 发布 · 154 阅读

文章标签：

#Flex #Google #Flash #Adobe #Tomcat

flex 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Flex中使用GoogleMap，并通过整合地图控件来增强导航功能，包括位置控制、大小控制、地图类型控制和概览地图控制。通过修改onMapReady()方法，将这些控件添加到地图中，实现地图的动态交互性和导航能力。

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

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

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

Xml代码

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

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