利用google map for flex 实现地图功能

本例子中将实现利用google map for flex 实现北京内社区和服务中心的个数 ，当点击某个某个分类的时候，实现位置的定位，当鼠标划过坐标的时候，显示先关基本信息，这时候需要map_flex_1_20.swc这个包，

下载地址为：http://code.google.com/intl/zh-CN/apis/maps/documentation/flash/

项目结构图为：

相信大家怎么创建一个flex和java项目 google一下就知道了 这里不讲述了

GoogleMapDemo.mxml 代码如下 ，里面详细的注解

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*" creationComplete="{initTree()}">
	<mx:Script>
	    <![CDATA[
	    	import mx.collections.ArrayCollection;
	    	import mx.events.ListEvent;
	    	import com.google.maps.styles.FillStyle;
	    	import com.google.maps.styles.StrokeStyle;
	    	import com.google.maps.overlays.MarkerOptions;
	    	import com.google.maps.overlays.Marker;
	    	import com.google.maps.InfoWindowOptions;
	    	import com.google.maps.controls.OverviewMapControlOptions;
	    	import com.google.maps.controls.OverviewMapControl;
	    	import com.google.maps.controls.MapTypeControl;
	    	import com.google.maps.controls.PositionControl;
	    	import com.google.maps.controls.ZoomControl;
	   
		    import com.google.maps.LatLng;
		    import com.google.maps.Map;
		    import com.google.maps.MapEvent;
		    import com.google.maps.MapMouseEvent;
		    import com.google.maps.MapType;
	               //用于初始化地图 里面精度和纬度都是真实 是我在网上查的
			private var beijing:ArrayCollection = new ArrayCollection(
				[
					{lat:39.93,lng:116.41,label:"A",name:"东城区",tip:"东城区：\n 社区：18\n 服务中心：20"},
					{lat:39.88,lng:116.42,label:"B",name:"崇文区",tip:"崇文区：\n 社区：18\n 服务中心：29"},
					{lat:39.93,lng:116.36,label:"C",name:"西城区",tip:"西城区：\n 社区：17\n 服务中心：45"},
					{lat:39.89,lng:116.37,label:"D",name:"宣武区",tip:"宣武区：\n 社区：23\n 服务中心：26"},
					{lat:39.93,lng:116.47,label:"E",name:"朝阳区",tip:"朝阳区：\n 社区：21\n 服务中心：28"},
					{lat:39.85,lng:116.33,label:"F",name:"丰台区",tip:"丰台区：\n 社区：10\n 服务中心：27"},
					{lat:39.9,lng:116.1,label:"G",name:"石景山区",tip:"石景山区：\n 社区：18\n 服务中心：26"},
					{lat:39.9,lng:116.3,label:"H",name:"海淀区",tip:"海淀区：\n 社区：18\n 服务中心：24"},
					{lat:39.9,lng:116,label:"I",name:"门头沟区",tip:"门头沟区：\n 社区：44\n 服务中心：30"},
					{lat:39.72,lng:115.98,label:"J",name:"房山区",tip:"房山区：\n 社区：18\n 服务中心：20"},
					{lat:39.85,lng:116.7,label:"K",name:"通州区",tip:"通州区：\n 社区：58\n 服务中心：20"},
					{lat:40.13,lng:116.65,label:"L",name:"顺义区",tip:"顺义区：\n 社区：78\n 服务中心：20"},
					{lat:40.22,lng:116.2,label:"M",name:"昌平区",tip:"昌平区：\n 社区：28\n 服务中心：20"},
					{lat:39.73,lng:116.33,label:"N",name:"大兴区",tip:"大兴区：\n 社区：18\n 服务中心：20"},
					{lat:40.32,lng:116.62,label:"O",name:"怀柔区",tip:"怀柔区：\n 社区：18\n 服务中心：20"},
					{lat:40.13,lng:117.1,label:"P",name:"平谷区",tip:"平谷区：\n 社区：18\n 服务中心：20"},
					{lat:40.37,lng:116.85,label:"Q",name:"密云县",tip:"密云县：\n 社区：18\n 服务中心：20"},
					{lat:40.47,lng:115.97,label:"R",name:"延庆县",tip:"延庆县：\n 社区：18\n 服务中心：20"}
				]
			);
			//初始化左边的tree
			private function initTree():void{
				var treeStr:String = "<root label='北京地区'>";
				for each(var area:Object in beijing){
					treeStr +="<node label='"+area.label+area.name+"' lat='"+area.lat+"' lng='"+area.lng+"' tip='"+area.tip+"'>" + 
							"</node>";
								
				}
				treeStr +="</root>";
				var treeData:XML = new XML(treeStr);
				treeId.dataProvider = treeData;
			}
		    private function onMapReady(event:Event):void {//加载地图
		    	 //设置地图显示的坐标,以及地图显示的类型. 
			    /**
			    * 	MapType有4种类型分别是 
				    HYBRID_MAP_TYPE 混合模式，
				    NORMAL_MAP_TYPE 标准模式，
				    PHYSICAL_MAP_TYPE自然地图模式，
				    SATELLITE_MAP_TYPE卫星模式 
				   ----------------------------------- 
				    new LatLng(39.92,116.46)纬度和经度
				**/
		      this.map.setCenter(new LatLng(39.92,116.46), 10, MapType.NORMAL_MAP_TYPE);
		      /**添加控件开始**/
		      map.addControl(new ZoomControl);
			  map.addControl(new PositionControl);
			  map.addControl(new MapTypeControl);
			  /**添加控件结束**/
			  //鼠标滚轮实现地图缩放
			  map.enableScrollWheelZoom(); 
			  map.enableContinuousZoom();
			  //显示一个地图的缩略图 
			 map.addControl( new OverviewMapControl( new OverviewMapControlOptions()) );  
			 
			 //添加地图显示图标
			  for each(var area:Object in beijing){
			  	var mark:Marker = new Marker(
			  		new LatLng(area.lat,area.lng),
			  		 new MarkerOptions({
				                  strokeStyle: new  StrokeStyle({color: 0x987654}),
				                  fillStyle: new  FillStyle({color: 0x223344, alpha: 0.8}),
				                  radius: 12,
				                  hasShadow: true,
				                  label:area.label,
				                  tooltip:area.tip
				      })
			  	);
			  	 map.addOverlay(mark);
			  }
			
			  /**
			  var address:LatLng 
			    = new LatLng(this.map.getCenter().lat(),this.map.getCenter().lng());
				map.openInfoWindow(
				    address, 
				    new InfoWindowOptions({title: "提示", content: "这是北京"})
			);

			
			//var mark:Marker = new Marker(new MarkerOptions());
			this.map.addEventListener(MapMouseEvent.CLICK,
				function(event:MapMouseEvent):void{
					map.openInfoWindow(
				    event.latLng, 
				    new InfoWindowOptions({title: "提示", content: "这是北京"})
			);
				});**/
		    }
		    
		    private function openCanvas(event:ListEvent):void{
				 var note:Object = event.currentTarget.selectedItem;
				
				//树枝节点 打开下面的子节点,menuTree.dataDescriptor默认返回DefaultDataDescriptor类的实例
				//DefaultDataDescriptor。isBranch(note)返回该节点是否包含子节点或者isBranch设置为true都将
				//返回true
                if(treeId.dataDescriptor.isBranch(note)){ 
                	/**打开或关闭分支项目。分支项目打开后，如果它的子项目分支已处于打开状态，
                	则它将还原它们的打开和关闭状态。如果设置 dataProvider 之后立即调用 expandItem()，
                	则您可能看不到正确的行为。您应该等待对组件进行验证或调用 validateNow()。 
                	menuTree.isItemOpen(note): 如果指定的项目分支处于打开状态（显示其子项），则返回 true。
                	 * */
                	treeId.expandItem(note, !treeId.isItemOpen(note), true);
                	return;   
                }
              	//点击的item 转换成(XML)节点 
              	var tempX:XML=XML(note);
				change(tempX.attribute("lat"),tempX.attribute("lng"),tempX.attribute("tip"));
			}
			
			private function change(lat:Number,lng:Number,tip:String):void{
					areaName.text = tip;
				   this.map.setCenter(new LatLng(lat,lng), 13, MapType.NORMAL_MAP_TYPE);
			}
	    ]]>
	</mx:Script>

	<mx:Panel x="60" y="28" width="1196" height="569" layout="absolute" title="mapDemo" fontSize="12">
		
		<mx:HDividedBox x="5" y="5" width="100%" height="100%">
			<mx:Canvas width="274" height="100%">
				<mx:Tree  height="407" width="266"  id="treeId" labelField="@label"  itemClick="openCanvas(event)"  x="0"></mx:Tree>
					<mx:TextArea id="areaName" width="264" height="61" editable="false" y="415" text="这里显示相信信息"/>
			</mx:Canvas>
			<maps:Map sensor="true" xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="70%" height="100%"
				 key="ABQIAAAABCDVNA4EUPvF9L7VfsWt6RRpgffdUlOOBwaqFsBhQWcsgun-4BRLiJuK-JzW_4RAkt0SeYkzJaOlmA"/>
		</mx:HDividedBox>
	</mx:Panel>

</mx:Application>

页面结果图为：