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>

效果图：



最后附上源码：程序源码