用flex开发Google Map应用程序.docx
- 文档编号:4710055
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:16
- 大小:564.02KB
用flex开发Google Map应用程序.docx
《用flex开发Google Map应用程序.docx》由会员分享,可在线阅读,更多相关《用flex开发Google Map应用程序.docx(16页珍藏版)》请在冰豆网上搜索。
用flex开发GoogleMap应用程序
GoogleMapsAPI除了提供能被Ajax应用程序调用的JavaScript接口之外,还提供了能被Flash应用程序调用的Flex语言接口。
本文就将介绍如何用GoogleMapsAPIforFlash来开发基于Flash的地图应用程序。
Flex简介
Flex是Abode公司贡献的一个开源框架,用于快速构建和维护高度交互并具有丰富表现力的互联网应用(RichInternetApplication)。
这些RIA应用程序既可以通过AdobeFlashPlayer部署在所有主流的浏览器上,也可以通过AIR(AdobeIntegratedRuntime)部署在所有主流操作系统的桌面上。
一个Flex应用程序通常有ActionScript和MXML两种代码组成。
ActionScript是一种面向对象的脚本语言,符合ECMAScript标准,用于实现Flex应用程序的逻辑;MXML是一种类似于HTML和XML的标记语言,用于构建Flex应用程序的用户界面。
Flex应用程序最终需要被编译成SWF文件以运行在AdobeFlashPlayer或AIR上。
本文并不详细讲述MXML和ActionScript的语法,如想了解这两种语言的用法,可以查看参考资源中的相关教程。
回页首
GoogleMapsAPIforFlash简介
GoogleMapsAPIforFlash使得Flex开发人员能够把GoogleMap嵌入到Flex应用程序中。
该API提供了很多实用的工具用来操控GoogleMap。
利用该API,您可以处理地图事件、添加地图控件、在地图上添加标记、或者在地图上面画线,也可以利用Geocoding将地址转换成经纬度数据。
笔者写作期间GoogleMapsAPIforFlash还不支持AIR环境,只能在FlashPlayer里运行。
回页首
搭建开发环境
开发Flex应用程序,您需要安装FlexSDK或者FlexBuilder。
前者是开源软件,没有提供IDE界面,您需要使用命令行来编译MXML和AcitionScript代码;后者是基于Eclipse的一个FlexIDE,提供了诸如代码提示、自动完成、Flex应用程序调试等很多方便的功能。
本文将以FlexBuilder为例,介绍如何搭建Flex开发环境以开发Google地图应用程序。
申请GoogleMapsAPIkey
首先您需要到Google站点上申请一个免费的GoogleMapsAPIkey。
它会提示您输入“MywebsiteURL”,为了本机测试,我们输入本机地址“http:
//127.0.0.1”,然后点击确认按钮之后就会看到申请的key了。
注意如果希望您的地图应用程序能在您自己的网站上运行,需要填写真正的网站域名。
下载GoogleMapsAPIforFlashSDK
去Google站点下载GoogleMapsAPIforFlashSDK到本地硬盘并解压。
解压后在lib目录下会有两个swc文件,这些swc文件包含开发GoogleMapsAPIforFlash应用程序要用到的所有ActionScript类。
在用Flex开发Google地图应用程序时,必须把后缀为_flex的swc文件加到项目的Librarypath中。
配置Flex工程的Librarypath
假定您已经有了FlexBuilder(可以从Adobe网站下载FlexBuilder试用版)。
打开FlexBuilder,创建一个新的Flex工程。
由于目前GoogleMapsAPIforFlash还不支持AIR,所以应用类型选择为WebApplication。
创建完Flex工程后,右键点击这个工程,在弹出菜单中选择Properties。
在Properties窗口中选择FlexBuildPath,再选择Librarypath,在此点击AddSWC按钮选择前面解压后得到的map_flex_*.swc文件即可,如图1所示。
图1.配置Flex工程的Librarypath
到此,环境就准备好了,接下来就可以动手用FlexBuilder开发Google地图应用程序了。
回页首
在Flex应用程序中使用GoogleMapsAPIforFlash
下面介绍用GoogleMapsAPIforFlash开发一个HelloWorld应用程序。
在上面建好的Flex工程中创建一个MXMLApplication,命名为SimpleMAP。
把清单1所示的代码加到SimpleMAP中,作为 application>的子节点,另外还需要将key值替换为您申请到的key。 Map>声明了一个Google地图对象,ActionScript代码可以用它的id引用这个地图对象。 清单1.声明一个Google地图对象 Mapxmlns: maps="com.google.maps.*" id="map"mapevent_mapready="onMapReady(event)" width="100%"height="100%" key=" ABQIAAAAEUQL_IqwWX4ZOcEtw0r7whRi_j0U6kJrkFvY4-OX2XYmEAa76BQc0gZPMJROw3owe9BMoRHM0FER_A" /> 这个地图对象初始化的时候会调用onMapReady()方法,在该方法中设置地图的坐标和类型,如清单2所示。 清单2.onMapReady方法 privatefunctiononMapReady(event: MapEvent): void{ //设置地图显示的坐标,以及地图显示的类型. //MapType有4种类型分别是 //HYBRID_MAP_TYPE混合模式, //NORMAL_MAP_TYPE标准模式, //PHYSICAL_MAP_TYPE自然地图模式, //SATELLITE_MAP_TYPE卫星模式 this.map.setCenter( newLatLng(39.92,116.46)/*经纬度*/, 14,MapType.NORMAL_MAP_TYPE); } 查看SimpleMAP.mxml的完整代码,请到代码下载部分下载示例代码source.zip。 编写好SimpleMAP后,右键点击该文件,选择Runas>Flexapplication,运行结果如图2所示。 图2.Flex开发的第一个Google地图应用程序 回页首 进一步介绍GoogleMapsAPIforFlash 上面仅仅是一个非常简单的HelloWorld应用程序,用到了GoogleMapsAPIforFlash的一些基本功能,下面将进一步介绍GoogleMapsAPIforFlash的其它高级功能。 添加地图控件 您可以修改上面的onMapReady方法,在地图上添加一些控件用于缩放、移动、切换地图类型以及显示一个地图缩略图。 代码如清单3所示。 清单3.添加控件到地图上 ... //显示一个方向的按钮,用来移动地图 map.addControl(newPositionControl(newPositionControlOptions())); //显示一个地图的缩略图 map.addControl(newOverviewMapControl(newOverviewMapControlOptions())); //显示一个刻度条用来放大和缩小地图 map.addControl(newZoomControl(newZoomControlOptions())); //在地图上显示地图的4种类型,可以随意切换 map.addControl(newMapTypeControl(newMapTypeControlOptions())); ... 运行后,如图3所示,在左边添加了一个按照刻度来缩放地图的控件,在右上角增加了地图类型切换的控件,在右下角显示了地图的缩略图。 图3.添加了控件的Google地图 通过刻度条来缩放地图不是很方便,GoogleMAPAPI提供了鼠标滚轮缩放地图的功能,在onMapReady方法里添加清单4所示代码,就可以实现鼠标滚轮缩放地图。 清单4.鼠标滚轮实现地图缩放的代码 ... map.enableScrollWheelZoom(); map.enableContinuousZoom(); ... 完整的代码请查看代码下载部分source.zip中的SimpleMAP2.mxml。 显示消息窗口 您可以用map对象的openInfoWindow方法将一个信息窗口显示在地图上面,代码如清单5所示。 清单5.显示消息窗口 varaddress: LatLng =newLatLng(this.getCenter().lat(),this.getCenter().lng()); map.openInfoWindow( address, newInfoWindowOptions({title: "Hello",content: "这是我在丹东的家"}) ); InfoWindowOptions对象为消息窗口提供了一些参数来确定消息窗口的内容和格式。 如title是消息窗口的标题,content为消息窗体的内容。 如果希望标题显示为html,可以设置titleHTML参数。 如果想改变title的格式可以通过改变titleFormat来实现,窗体的内容也可以设置contentHTML、contentFormat参数。 清单5的代码运行后如图4所示。 图4.默认的消息窗口 如果您觉得该方法提供的消息窗口不够漂亮,也可以自定义消息窗口。 这需要你创建一个继承Sprite类的ActionScript类,完整代码请查看代码下载部分source.zip中的MyInfoWindowSprite.as,清单6的代码演示了如何调用自定义的消息窗口。 清单6.调用自定义消息窗口 varcustomContent: MyInfoWindowSprite=newMyInfoWindowSprite(); varoptions: InfoWindowOptions=newInfoWindowOptions({customContent: customContent}); //将窗体实例赋给InfoWindowOptions类 marker.addEventListener(MapMouseEvent.CLICK,function(event: MapMouseEvent): void{ //通过marker弹出自定义窗体 marker.openInfoWindow(options); 自定义的消息窗口的效果如图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; //先声明一个数组,用于存放坐标数据 vararray: Array=newArray(); //将坐标添加到数组里面 array.push(this.startLatLng,this.endLatLng); //声明线条的样式, //Color是线条的颜色, //alpha是线条的透明度, //thickness是线条的宽度 varstrokeStyle: StrokeStyle =newStrokeStyle({color: 0xFF0000,alpha: 0.1,thickness: 5}); varpolylineOption: PolylineOptions =newPolylineOptions({strokeStyle: strokeStyle}); //声明Polyline varpolyline: Polyline=newPolyline(array,polylineOption); //添加Polyline到map对象里 map.addOverlay(polyline); } this.isStartPoint=! this.isStartPoint; }); 运行后,在地图上用鼠标点击两个不同的点,这两点之间就会画上一条直线。 多次点击两个不同的点,可以画折线,如图6所示。 图6.画线效果 地址转换为经纬度数据(Geocoding) Marker Marker对象标记一个在地图上的位置,Marker的构造函数需要经纬度数据,还可以在构造函数中传递MarkerOptions对象的实例来设置Marker的样式以及是否可以拖动Marker。 可以通过map.addOverlay方法将Marker添加到地图中。 编写Flex地图应用程序时,定位Google地图的中心位置,在地图上放置marker都需要事先知道位置的经纬度数据。 这对用户并不方便,我们习惯用的是地址,能记住的也是地址,而不是经纬度数据。 如何解决这个问题呢,GoogleMapsAPIforFlash提供了将地址转换为经纬度的API—ClientGeocoder。 ClientGeocoder要求与Googleserver进行异步通信以得到地址的经纬度数据。 用ClientGeocoder编程需要按顺序执行下面三个步骤: 1.创建ClientGeocoder对象的实例。 ClientGeocoder支持多个国家的地址转换,如果要转换中国的地址,创建ClientGeocode对象实例的时候,加上参数"CN"即可; 2.注册ClientGeocoder实例的事件监听器。 有两个事件: GEOCODING_SUCCESS和GEOCODING_FAILURE。 前者表示地址转换成功,GeocodingEvent将返回转换后的经纬度数据;后者表示地址转换失败,GeocodingEvent将返回错误代码; 3.调用ClientGeocoder.geocode()方法发起地址转换的请求到GoogleServer。 清单8演示了如何用ClientGeocoder进行编程,如果地址转换成功将在地图上创建一个Marker,如果地址转换失败则弹出提示窗口。 清单8.使用ClientGeocoder进行地址到经纬度的转换 //先创建ClientGeocoder实例 vargeocoder: ClientGeocoder=newClientGeocoder("CN"); //注册地址转换成功事件的listener geocoder.addEventListener( GeocodingEvent.GEOCODING_SUCCESS,geocodingSuccess); //注册地址转换失败事件的listener geocoder.addEventListener( GeocodingEvent.GEOCODING_FAILURE,geocodingFailure); //发送地址转换请求 geocoder.geocode(address); privatefunctiongeocodingSuccess(event: GeocodingEvent): void{ trace(event.response.placemarks[0].address); varplacemarks: Array=event.response.placemarks; if(placemarks.length>0){ //得到返回数组的第一个对象,也就是转换后的经纬度数据 varplacemark: Object=placemarks[0]; //设置地图中心坐标 this.setCenter(placemark.point); createMarker( placemark.point,event.response.placemarks[0].address); } } privatefunctioncreateMarker(point: LatLng,city: String): void{ //创建marker对象,draggable: true表示可以在地图上拖动 marker=newMarker(point,newMarkerOptions({draggable: true})); varcustomContent: MyInfoWindowSprite=newMyInfoWindowSprite(); customContent.addEventListener("close", function(event: Event): void{ marker.closeInfoWindow(); }); this.addOverlay(marker); } privatefunctiongeocodingFailure(event: GeocodingEvent): void{ Alert.show("Conversionfails"); } 回页首 结束语 有了GoogleMapsAPIFlash,Flex开发人员就可以像JavaScript开发人员一样将GoogleMap嵌入到Web应用程序中,不同的是JavaScript开发人员用的是GoogleMapsAPIforJavaScript版本,Flex开发人员用的是GoogleMapsAPIforFlash版本。 免责声明 本文仅代表作者本人观点,不代表IBM公司观点。 回页首 下载 描述 名字 大小 下载方法 示例源代码 source.zip 7KB HTTP 关于下载方法的信息 参考资料 学习 ∙访问Flex的官方网站: 获取Flex最新信息。 ∙访问GoogleMapsAPIforFlash的官方网站: 获取最新信息。 ∙访问ActionScript技术中心: 获取ActionScript的知识。 ∙“Web2.0用户界面技术”(developerWorks,2007年2月): 本文要讨论一系列Web2.0用户界面技术,让您构建的应用程序具有比浏览器更好的用户体验。 ∙“Flex开发入门”(developerWorks,2009年1月): 本文介绍Flex开发的基础知识: 包括如何搭建开发环境,如何调试,以及如何建立和部署简单的Flex项目。 ∙“使用FlexSDK实现一个Facebook相册”(developerWorks,2008年12月): 本篇教程将在AdobeFlex中开发一个Facebook应用程序,它可以以幻灯片的形式显示用户的Facebook相册。 ∙“ActionScript3.0闪亮登场! ”(developerWorks,2007年4月): ActionScript3.0是一种强大的面向对象编程语言,它标志着FlashPlayerRuntime演化过程中的一个重要阶段。 ∙“解决Google地图编程内的中文地名翻译问题”(developerWorks,2009年1月): 最新的GoogleMapsAPI版本不太擅长解析中文地名,非常不便于中国用户在其应用程序中使用。 在本篇文章中,我们给出了一个可行的解决方案,再加上其他的一些Web服务,就能用目前的这个GoogleMapsAPI解析中文地名。 ∙通过developerWorksWeb开发专区内有关Web技术的文章和教程(包括本专栏之前的各期文章)扩展您的站点开发技能。 获得产品和技术 ∙从Adobe网站下载最新的FlexSDK。 ∙从Adobe网站下载FlexBuilder的试用版。 ∙从GoogleAPI网站获得最新的GoogleMapsAPIforFlashSDK。 ∙IBM试用软件: 使用这些可直接从developerWorks下载的软件构建您的下一个开发项目。 讨论 ∙通过参与developerWorksblog加入developerWorks社区。 作者简介 傅飞,在IBM中国软件开发中心Lotus部门担任软件工程师,熟悉Java和Eclipse,对开源软件,Web2.0和RIA感兴趣,关注软件行业和互联网发展趋势,业余时间喜欢看电影。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 用flex开发Google Map应用程序 flex 开发 Google Map 应用程序