[url]http://www.ibm.com/developerworks/cn/web/wa-l o-flexgoogle/?ca=dgr-cn-javaeyeflexg
[/url]
Google Maps API 除开供给能被 Ajax 应用程序挪用的 JavaScript 接口之外，还供给了能被 Flash 应用程序挪用的 Flex 语言接口。这篇文章就将介绍怎样用 Google Maps API for Flash 来研发基于 Flash 的地图应用程序。
Flex 简介
Flex 是 Abode 公司贡献的一个开源框架，用于迅速构建和维护高度交互并具有富厚表现力的互联网应用( Rich Internet Application )。这些 RIA 应用程序既可以路程经过过程 Adobe Flash Player 部署在所有主流的浏览器上，也能够路程经过过程 AIR(Adobe Integrated Runtime) 部署在所有主流操作系统的桌面上。
一个 Flex 应用程序凡有 ActionScript 和 MXML 两种代码构成。ActionScript 是一种面向对象的剧本语言，切合 ECMAScript 标准，用于使成为事实 Flex 应用程序的逻辑；MXML 是一种近似于 HTML 和 XML 的标记语言，用于构建 Flex 应用程序的用户界面。Flex 应用程序最终需要被编译成 SWF 文件以运行在 Adobe Flash Player 或 AIR 上。
这篇文章其实不具体讲评 MXML 和 ActionScript 的语法，如想了解这两种语言的用处，可以查看 参考资源 中的相干教程。
回页首
Google Maps API for Flash 简介
Google Maps API for Flash 要得 Flex 研发人员能够把 Google Map 镶嵌到 Flex 应用程序中。该 API 供给了很多实用的工具用来操控 Google Map。哄骗该 API，您可以处置惩罚地图事件、新增地图控件、在地图上新增标记、或者在地图上面画线，也能够哄骗 Geocoding 将地址转换成经纬度数据。作者撰著期间 Google Maps API for Flash 还不支持 AIR 环境，只能在 Flash Player 里运行。
回页首
搭建研发环境
研发 Flex应用程序，您需要安装 Flex SDK或者Flex Builder。前者是开源软件，没有供给 IDE 界面，您需要使用命令行来编译MXML 和 AcitionScript代码；后者是基于 Eclipse 的一个 Flex IDE，供给了诸如代码提醒、自己主动完成、Flex 应用程序调试等很多利便的功效。这篇文章将以 Flex Builder 为例，介绍怎样搭建 Flex 研发环境以研发 Google 地图应用程序。
申请 Google Maps API key
首先您需要到 Google 站点 上申请一个免费的 Google Maps API key。它会提醒您输入“My web site URL”，为了本机实验，我们输入本机地址“http://127.0.0.1”，然后点这儿明确承认按钮然后就会看到申请的 key 了。注意要是希望您的地图应用程序能在您自己的网站上运行，需要填写真实的网站域名。
下载 Google Maps API for Flash SDK
去 Google 站点 下载 Google Maps API for Flash SDK 到本地硬盘并解压。解压后在 lib 目次下会有两个 swc 文件，这些 swc 文件包含研发 Google Maps API for Flash 应用程序要用到的所有 ActionScript 类。在用 Flex 研发 Google 地图应用程序时，必须把后缀为 _flex 的 swc 文件加到项目的 Library path 中。
设置 Flex 工程的 Library path
假定您已经有了 Flex Builder（可以从 Adobe 网站 下载 Flex Builder 尝试使用版）。打开 Flex Builder，创立一个新的 Flex 工程。因为今朝 Google Maps API for Flash 还不支持 AIR，以是应用类型选择为 Web Application。创立完 Flex 工程后，右键点这儿这个工程，在弹出菜谱中选择 Properties。在 Properties 窗户中选择 Flex Build Path，再选择 Library path， 在此点这儿 Add SWC 按钮选择前边解压后得到的 map_flex_*.swc 文件便可，如图 1 所示。
图 1. 设置 Flex 工程的 Library path
图 1. 设置 Flex 工程的 Library path
到此，环境就准备好了，接下来就能够下手用 Flex Builder 研发 Google 地图应用程序了。
回页首
在 Flex 应用程序中使用 Google Maps API for Flash
底下介绍用 Google Maps API for Flash 研发一个 Hello World 应用程序。在上面建好的 Flex 工程中创立一个 MXML Application，定名为 SimpleMAP。把详细登记单 1 所示的代码加到 SimpleMAP 中，作为 <mx:application> 的子节点，别的还需要将 key 值替换为您申请到的 key。<maps:Map> 声了然一个 Google 地图对象，ActionScript 代码可以用它的id援用这个地图对象。
详细登记单1. 声明一个 Google地图对象
<maps:Map xmlns:maps="com.google.maps.*"
id="map" mapevent_mapready="onMapReady(event)"
width="100" height="100
key="
ABQIAAAAEUQL_IqwWX4ZOcEtw0r7whRi_j0U6kJrkFvY4-OX2X YmEAa76BQc0gZPMJROw3owe9BMoRHM0FER_A"
/>
这个地图对象初始化的时候会挪用 onMapReady() 方法，在该方法中设置地图的坐标和类型，如详细登记单 2 所示。
详细登记单 2. onMapReady 方法
private function onMapReady(event:MapEvent):void {
//设置地图预示的坐标,和地图预示的类型.
//MapType有4种类型分别是
//HYBRID_MAP_TYPE 混合模式，
//NORMAL_MAP_TYPE 标准模式，
//PHYSICAL_MAP_TYPE天然地图模式，
//SATELLITE_MAP_TYPE卫星模式
this.map.setCenter(
new LatLng(39.92,116.46)/*经纬度*/,
14, MapType.NORMAL_MAP_TYPE);
}
查看 SimpleMAP.mxml 的完整代码，请到 代码下载 部门下载举出例子代码 source.zip。编写好 SimpleMAP 后，右键点这儿该文件，选择 Run as>Flex application，运行结果如图 2 所示。
图 2. Flex 研发的第一个 Google 地图应用程序
图 2. Flex 研发的第一个 Google 地图应用程序
回页首
进一步介绍 Google Maps API for Flash
上面仅只是一个很是简略的 Hello World 应用程序，用到了 Google Maps API for Flash 的一些基本功效，底下将进一步介绍 Google Maps API for Flash 的其他高级功效。
新增地图控件
您可以修改上面的 onMapReady 方法，在地图上新增一些控件用于缩放、移动、切换地图类型和预示一个地图略图。代码如详细登记单 3 所示。
详细登记单3. 新增控件到地图上
...
//预示一个方向的按钮,用来移动地图
map.addControl( new PositionControl( new PositionControlOptions()));
//预示一个地图的略图
map.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) );
//预示一个刻度条用来放大和由大变小地图
map.addControl( new ZoomControl( new ZoomControlOptions() ) );
//在地图上预示地图的4种类型，可以随心情急迫换
map.addControl( new MapTypeControl( new MapTypeControlOptions() ) );
...
运行后，如图 3 所示，在左面新增了一个按照刻度来缩放地图的控件，在右上角增长了地图类型切换的控件，在右下角预示了地图的略图。
图 3. 新增了控件的 Google 地图
图 3. 新增了控件的 Google 地图
路程经过过程刻度条来缩放地图不是很利便，Google MAP API 供给了鼠标虎符缩放地图的功效，在 onMapReady 方法里新增详细登记单4所示代码，就能够使成为事实鼠标虎符缩放地图。
详细登记单 4. 鼠标虎符使成为事实地图缩放的代码
...
map.enableScrollWheelZoom();
map.enableContinuousZoom();
...
完整的代码请查看 代码下载 部门 source.zip 中的 SimpleMAP2.mxml。
预示动静窗户
您可以用 map 对象的 openInfoWindow 方法将一个信息窗户预示在地图上面，代码如详细登记单 5 所示。
详细登记单5. 预示动静窗户
var address:LatLng
= new LatLng(this.getCenter().lat(),this.getCenter().lng ());
map.openInfoWindow(
address,
new InfoWindowOptions({title: "Hello", content: "这是我在丹东的家"})
);
InfoWindowOptions 对象为动静窗户供给了一些参数来确定动静窗户的内部实质意义和格式。如 title 是动静窗户的标题，content 为动静窗体的内部实质意义。要是希望标题预示为 html ，可以设置 titleHTML 参数。要是想改变 title 的格式可以路程经过过程改变 titleFormat 来使成为事实，窗体的内部实质意义也能够设置 contentHTML、contentFormat 参数。详细登记单 5 的代码运行后如图 4 所示。
图 4. 默认的动静窗户
图 4. 默认的动静窗户
要是您感觉该方法供给的动静窗户不敷标致,也能够自定义动静窗户。这需要你创立一个继承 Sprite 类的 ActionScript 类，完整代码请查看 代码下载 部门 source.zip 中的 MyInfoWindowSprite.as，详细登记单 6 的代码演示了怎样挪用自定义的动静窗户。
详细登记单 6. 挪用自定义动静窗户
var customContent:MyInfoWindowSprite = new MyInfoWindowSprite();
var options:InfoWindowOptions = new InfoWindowOptions({customContent: customContent});
//将窗体实例赋给 InfoWindowOptions 类
marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
//路程经过过程 marker 弹出自定义窗体
marker.openInfoWindow(options);
自定义的动静窗户的成效如图5所示。
图 5. 自定义动静窗户成效
图 5. 自定义动静窗户成效
在地图上画线
Polyline 类的效用是在地图上划线，您只消将坐标数组传给 Polyline，再将 Polyline 新增到地图中便可，线段将根据坐标数组的位置数据连接起来预示在地图上. 详细登记单7的代码演示了怎样在地图上画直线。完整代码请查看 代码下载 部门 source.zip 中的 SimpleMAP3.MXML。
详细登记单 7. 在地图上画直线的代码
map.addEventListener(MapMouseEvent.MOUSE_DOWN, function(e:MapMouseEvent):void {
//定义一个标记,
//true 表白鼠标点这儿的坐标是直线的肇始点，
//false 表白鼠标点这儿的坐标是直线结束点
if (this.isStartPoint == undefined){
this.isStartPoint = true;
}
if(this.isStartPoint){
this.startLatLng = e.latLng;
}else{
this.endLatLng = e.latLng;
//先声明一个数组,用于储存安放坐标数据
var array:Array = new Array();
//将坐标新增到数组里面
array.push(this.startLatLng,this.endLatLng);
//声明线条的范式,
//Color 是线条的颜色,
//alpha 是线条的公开度,
//thickness 是线条的宽度
var strokeStyle:StrokeStyle
= new StrokeStyle({color:0xFF0000,alpha: 0.1,thickness:5});
var polylineOption:PolylineOptions
= new PolylineOptions({strokeStyle:strokeStyle});
//声明Polyline
var polyline:Polyline = new Polyline(array,polylineOption);
//新增 Polyline 到 map 对象里
map.addOverlay(polyline);
}
this.isStartPoint = ! this.isStartPoint;
});
运行后，在地图上用鼠标点这儿两个差别的点，这两点之间就会画上一条直线。屡次点这儿两个差别的点，可以画折线，如图 6 所示。
图 6. 画线成效
图 6. 画线成效
地址转换为经纬度数据(Geocoding)
马克er
马克er 对象标记一个在地图上的位置，马克er 的构造函数需要经纬度数据，还可以在构造函数中传递 马克erOptions 对象的实例来设置 马克er 的范式和是否可以拖动 马克er。可以路程经过过程 map.addOverlay 方法将 马克er 新增到地图中。
编写 Flex 地图应用程序时，定位 Google 地图的中间位置, 在地图上放置 marker 都需要事前懂得位置的经纬度数据。这对用户其实不利便，我们习惯用的是地址，能记住的也是地址，而不是经纬度数据。怎样解决这个需要别人解答的题目呢，Google Maps API for Flash 供给了将地址转换为经纬度的 API — ClientGeocoder。
ClientGeocoder 要求与 Google server 进行异步通信以得到地址的经纬度数据。用 ClientGeocoder 编程需要按顺序执行底下三个步调：
1. 创立 ClientGeocoder 对象的实例。ClientGeocoder 支持多个国家的地址转换，要是要转换神州的地址，创立 ClientGeocode 对象实例的时候，加上参数 "CN" 便可；
2. 注册 ClientGeocoder 实例的事件☆☆。有两个事件：GEOCODING_SUCCESS 和 GEOCODING_FAILURE。 前者暗示地址转换成功，GeocodingEvent 将返回转换后的经纬度数据；后者暗示地址转换掉败，GeocodingEvent 将返回纰缪代码；
3. 挪用 ClientGeocoder.geocode() 方法发起地址转换的请求到 Google Server。
详细登记单 8 演示了怎样用 ClientGeocoder 进行编程，要是地址转换成功将在地图上创立一个 马克er，要是地址转换掉败则弹出提醒窗户。
详细登记单 8. 使用 ClientGeocoder 进行地址到经纬度的转换
//先创立ClientGeocoder实例
var geocoder:ClientGeocoder = new ClientGeocoder("CN");
//注册地址转换成功事件的listener
geocoder.addEventListener(
GeocodingEvent.GEOCODING_SUCCESS,geocodingSuccess) ;
//注册地址转换掉败露件的listener
geocoder.addEventListener(
GeocodingEvent.GEOCODING_FAILURE,geocodingFailure) ;
//送出地址转换请求
geocoder.geocode(address);
private function geocodingSuccess(event:GeocodingEvent):void {
trace(event.response.placemarks[0].address);
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0) {
//得到返回数组的第一个对象，也就是转换后的经纬度数据
var placemark:Object = placemarks[0];
//设置地图中间坐标
this.setCenter(placemark.point);
create马克er(
placemark.point,event.response.placemarks[0].addre ss);
}
}
private function create马克er(point:LatLng,city:String):void {
//创立 marker 对象,draggable: true 暗示可以在地图上拖动
marker = new 马克er(point, new 马克erOptions({draggable: true}));
var customContent:MyInfoWindowSprite = new MyInfoWindowSprite();
customContent.addEventListener("close",
function(event:Event):void {
marker.closeInfoWindow();
});
this.addOverlay(marker);
}
private function geocodingFailure(event:GeocodingEvent):void {
Alert.show("Conversion fails");
}
回页首
结语
有了 Google Maps API Flash, Flex 研发人员就能够像 JavaScript 研发人员同样将 Google Map 镶嵌到 Web 应用程序中，差别的是 JavaScript 研发人员用的是 Google Maps API for JavaScript 版本，Flex 研发人员用的是 Google Maps API for Flash 版本。
