利用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>
页面结果图为：
