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, obj.lng), 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:'软件学院', contactPerson:'随风', contactPhone:'110', memo:'来我的怀里/n或者/n让我住进你的心里/n默然　相爱/n寂静　欢喜'}, {lat:'43.865290946961295', lng:'87.58017699999999', bussinesLobby:'小西沟', contactPerson:'随风', contactPhone:'110', 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, obj.lng), new InfoWindowOptions({titleHTML: myTitle, 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>

效果图：

最后附上源码：程序源码