Flex开发google map应用程序

在最近遇到了一个要在flex中调用google map应用，在这记录一下步骤：

申请 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 开发的第一个 Google 地图应用程序

BetterMap.mxml在原有的Map添加了一些控件，用于缩放、移动、切换地图类型以及显示一个地图缩略图。
<?xml version="1.0" encoding="utf-8"?> <Map xmlns="com.google.maps.*" xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%" mapevent_mapready="onMapReady(event)" creationComplete="init()" resize="resizeMap(event)"> <mx:Script> <!--[CDATA[ import com.google.maps.InfoWindowOptions; import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapMouseEvent; import com.google.maps.MapMoveEvent; import com.google.maps.MapType; import com.google.maps.MapTypeOptions; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.MapTypeControlOptions; import com.google.maps.controls.OverviewMapControl; import com.google.maps.controls.OverviewMapControlOptions; import com.google.maps.controls.PositionControl; import com.google.maps.controls.PositionControlOptions; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.ZoomControlOptions; import com.google.maps.interfaces.IMapType; import com.google.maps.overlays.Marker; import com.google.maps.overlays.MarkerOptions; import com.google.maps.services.ClientGeocoder; import com.google.maps.services.ClientGeocoderOptions; import com.google.maps.services.GeocodingEvent; import flash.events.Event; import mx.collections.ArrayCollection; import mx.containers.HBox; import mx.controls.Alert; import mx.controls.Image; import mx.controls.Label; import mx.utils.ObjectUtil; private var tmpx:Number; private var tmpy:Number; private var marker:Marker; [Bindable] public var nowCenterPoints:String; public var defaultPointX:Number; public var defaultPointY:Number public var mapClickEvent:Function = function(event:MapMouseEvent){trace("mouse clicked")}; private var _pointArr:ArrayCollection = new ArrayCollection([{lat:'43.865290946961295',lng:'87.58017699999999',bussinesLobby:'小西沟',contactPerson:'随风',contactPhone:'110',memo:''}]); private var isReady:Boolean = false; public function set pointArr(value:ArrayCollection):void{ if(value!=null && value.length>0){ _pointArr = value; if(isReady) locationMany(value); } } private function onMapReady(event:MapEvent):void { this.setCenter(new LatLng(this.defaultPointX,this.defaultPointY),13,MapType.NORMAL_MAP_TYPE); this.enableScrollWheelZoom(); this.enableContinuousZoom(); this.addControl( new PositionControl( new PositionControlOptions() ) ); this.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) ); this.addControl( new ZoomControl( new ZoomControlOptions() ) ); this.addControl( new MapTypeControl( new MapTypeControlOptions() ) ); isReady = true; locationMany(_pointArr); } private function init():void { this.addEventListener(MapMoveEvent.MOVE_END,onMapMoveEnd); this.addEventListener(MapMouseEvent.CLICK,mapClickEvent); } public function onMapMoveEnd(event:MapMoveEvent):void { this.nowCenterPoints = this.getCenter().lat()+" "+this.getCenter().lng(); trace(this.nowCenterPoints); } public function resizeMap(event:Event):void { this.setSize(new Point(this.width,this.height)); } public function moveToPoint(x:Number,y:Number):void{ this.tmpx =x; this.tmpy = y; this.panTo(new LatLng(this.tmpx,this.tmpy)); if(x==40.105 && y==124.352){ var tmp:LatLng = new LatLng(this.getCenter().lat()+0.001,this.getCenter().lng()); this.openInfoWindow(tmp,new InfoWindowOptions({title: "Hello",content: "这是我在丹东的家"})); } var t:LatLng = new LatLng(x,y); this.createMarker(t,""); } private function createMarker(point:LatLng,city:String):void { marker = new Marker(point,new MarkerOptions({draggable: true})); var customContent:MyInfoWindowSprite = new MyInfoWindowSprite(); customContent.addEventListener("close",function(event:Event):void { marker.closeInfoWindow(); }); var options:InfoWindowOptions = new InfoWindowOptions({ customContent: customContent,customOffset: new Point(0,10) }); marker.addEventListener(MapMouseEvent.CLICK,function (event:MapMouseEvent):void { var markerContent:String = marker.getLatLng().toString(); customContent.bodyTextField.text = city; customContent.bodyTextFielda.text= "北纬:"+marker.getLatLng().lat(); customContent.bodyTextFieldb.text= "东经:"+marker.getLatLng().lng(); marker.openInfoWindow(options); }); this.addOverlay(marker); } public function moveToWhere(where:String):void { //var geocoder:ClientGeocoder = new ClientGeocoder("CN"); var geocoder:ClientGeocoder = new ClientGeocoder(new ClientGeocoderOptions("CN")); geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,geocodingSuccess); geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,geocodingFailure); geocoder.geocode(where); } 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); createMarker(placemark.point,event.response.placemarks[0].address); } } private function geocodingFailure(event:GeocodingEvent):void { Alert.show("search failed"); } private function locationMany(arr:ArrayCollection):void { if(arr == null || arr.length == 0) { Alert.show("No datas exist,please get datas!","error"); return; } var index:Number = 0; for each(var obj:Object in arr) { //var obj:Object = arr[item] as Object; this.setCenter(new LatLng(obj.lat,obj.lng),13); var marker:MarkerOptions = new MarkerOptions(); //marker.icon = setImg(obj); marker.tooltip = obj.bussinesLobby + "/n联系人: " + obj.contactPerson + "/n联系电话: " + obj.contactPhone; /* marker.icon = new icons(); marker.tooltip = obj.vrn + obj.lat; marker.radius = 15; marker.label = obj.vrn; marker.fillStyle = new FillStyle({color: 0x6FD4EB,alpha: 0.8}); */ marker.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER; marker.iconOffset = new Point(4,4); var markers:Marker = new Marker(this.getCenter(),marker); this.addOverlay(setMarkerListener(markers,index)); index++; } } //设置图片 private function setImg(obj:Object):HBox { var hbox:HBox = new HBox(); var img:Image = new Image(); img.source = "assets/icon/actions/go-home.png"; // var labelBox:HBox = new HBox(); // labelBox.styleName = "in"; // var label:Label = new Label(); // label.text = ""; // label.height = 14; // labelBox.addChild(label); hbox.addChild(img); // hbox.addChild(labelBox); // hbox.addEventListener(MapMouseEvent.CLICK,showInfoWin); return hbox; } protected function setMarkerListener(markers:Marker,index:Number):Marker{ if(index>=_pointArr.length -1) index = _pointArr.length -1; var obj:Object = _pointArr.getItemAt(index); var self:BetterMAP = this; markers.addEventListener(MapMouseEvent.CLICK,function(e:MapMouseEvent):void { var myTitle:String = "<b>提示框 </b>"; var myContent:String = "地点：" + obj.bussinesLobby + "/n联系人：" + obj.contactPerson + "/n联系电话：" + obj.contactPhone + "/n备注：" + obj.memo; self.openInfoWindow(new LatLng(obj.lat,new InfoWindowOptions({titleHTML: myTitle,contentHTML: myContent})); }); return markers; } ]]--> </mx:Script> </Map>

调用BetterMap来显示地图

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <fx:Script> <!--[CDATA[ import com.google.maps.InfoWindowOptions; import com.google.maps.LatLng; import com.google.maps.MapMouseEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.core.ScrollPolicy; import mx.events.ListEvent; import mx.skins.halo.BusyCursor; [Bindable] private var bussinesLobbyArr:ArrayCollection = new ArrayCollection([{lat:'43.81993975296394',lng:'87.5808690099259',bussinesLobby:'软件学院',memo:'来我的怀里/n或者/n让我住进你的心里/n默然　相爱/n寂静　欢喜'},{lat:'43.865290946961295',memo:'你见，或者不见我/n我就在那里/n不悲不喜/n你念，或者不念我/n情就在那里/n不来不去/n你爱，或者不爱我/n爱就在那里/n不增不减/n你跟，或者不跟我/n我的手就在你手里/n不舍不弃/n来我的怀里/n或者/n让我住进你的心里/n默然　相爱/n寂静　欢喜'}]); protected function mapCreateComplete():void{ // ContactChannelAction.listAllCc()(function(blArr:ArrayCollection){ // if(blArr.length>0) // bussinesLobbyArr = blArr; // }); } protected function getHerePoint(event:MapMouseEvent){ var point:LatLng = event.latLng; var jwdStr = "lat:" + point.lat() + "/nlng:" + point.lng(); mapUI.openInfoWindow(point,new InfoWindowOptions({title: "鼠标点击处经纬度",content: jwdStr})); } protected function addInfo():void{ var obj:Object = []; var num:Number = bussinesLobbyArr.length + 1; obj["bussinesLobby"] = "营业厅" + num; obj["contactPerson"] = "联系人" + num; obj["contactPhone"] = "联系电话" + num; obj["memo"] = "备注" + num; bussinesLobbyArr.addItem(obj); } private function itemSelected(event:ListEvent):void{ var obj:Object = ((cc_grid.dataProvider)as ArrayCollection).getItemAt(event.rowIndex); showInfoWindow(obj); } protected function searchBl(str:String):void{ var hasBussinesLobby:Boolean = false; for each(var obj:Object in bussinesLobbyArr){ var bussinesLobby:String = obj.bussinesLobby; if(bussinesLobby.indexOf(str) != -1){ showInfoWindow(obj); cc_grid.selectedItem = obj; hasBussinesLobby = true; break; } } if(!hasBussinesLobby) Alert.show(str + "不存在。"); } protected function showInfoWindow(obj:Object):void{ var myTitle:String = "<b>提示框 </b>"; var myContent:String = "地点：" + obj.bussinesLobby + "/n联系人：" + obj.contactPerson + "/n联系电话：" + obj.contactPhone + "/n备注：" + obj.memo; mapUI.openInfoWindow(new LatLng(obj.lat,contentHTML: myContent})); } ]]--> </fx:Script> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:HDividedBox left="0" right="0" top="0" bottom="0"> <mx:Canvas height="100%" width="100%" borderStyle="solid" borderColor="#CCCCCC"> <local:BetterMAP key="ABQIAAAAbMgpg5VoUeE3TNvpFf_WcxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT1i2EAfEMebb37tiQOrmJI9sC85Q" defaultPointX="43.795200" defaultPointY="87.580177" id="mapUI" left="0" right="0" top="0" bottom="0" sensor="false" pointArr="{bussinesLobbyArr}" mapClickEvent="getHerePoint" initialize="mapCreateComplete()"/> </mx:Canvas> <mx:Canvas height="100%" width="0%"> <mx:Button label="添加信息" click="addInfo()" left="10" top="5"/> <mx:Label text="查询:" width="50" left="5" top="30" toolTip="输入营业厅名，按Enter键进行查询。"/> <mx:TextInput text="" id="txt_searchBl" left="60" top="30" width="160" enter="searchBl(txt_searchBl.text)" toolTip="输入营业厅名，按Enter键进行查询。"/> <mx:DataGrid id="cc_grid" itemClick="itemSelected(event)" verticalScrollPolicy="{ScrollPolicy.AUTO}" horizontalScrollPolicy="{ScrollPolicy.AUTO}" left="0" top="60" right="0" bottom="0" dataProvider="{bussinesLobbyArr}"> <mx:columns> <mx:DataGridColumn headerText="序号" width="40" editable="false" labelFunction="{function (item:Object,column:DataGridColumn):String{return (cc_grid.dataProvider.getItemIndex(item)+1).toString();}}" /> <mx:DataGridColumn headerText="营业厅" dataField="bussinesLobby" editable="false"/> <mx:DataGridColumn headerText="联系人" dataField="contactPerson" editable="false"/> <mx:DataGridColumn headerText="联系电话" dataField="contactPhone" editable="false"/> </mx:columns> </mx:DataGrid> </mx:Canvas> </mx:HDividedBox> </s:Application>

效果图：

最后附上源码：程序源码