flash builder 4 与 Google Maps API for Flash的结合应用（一）

flash builder 4 与 Google Maps API for Flash的结合应用（一）Google Maps API for Flash，给flash builder的开发提供了接口。

【专业web 3d、webGL、flash 3d程序开发：北京贝武易科技公司】
flex程序培训，详情QQ:1539988257
贝武易-HTML5 3D技术联盟机构，提供研究、交流和培训机会，欢迎加入，地点：北京。
贝武易-HTML5 3D技术联盟群：49771294

一、申请 Google Maps API key
到Google Maps API的网站申请一个。
http://code.google.com/apis/maps/signup.html
为了测试用，可以用本地的IP地址：“http://127.0.0.1”，

二、下载Google Maps API for Flash的SDK。
[url= http://dl.iteye.com/topics/download/ac0b7c55-3242-37f1-b05b-5d24e2b8a994]（见附件下载）[/url]
三、配置 Flex 工程的 Library path


把map_flex_1_18.swc导入库



新建Flex项目，最终代码为：

<?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:maps="com.google.maps.*">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
			  key="ABQIAAAA2eRN6ZN1rsKH7lbJgxrvfhQSQTm2lqzTPZ7_ZJNzt4c-sqjpuhTiqhgOloYpttEZu0iIUcVGzQP1kA"/>
	<fx:Script>
		<![CDATA[
			import com.google.maps.LatLng;
			import com.google.maps.MapEvent;
			import com.google.maps.MapType;
			private function onMapReady(event:MapEvent):void {       
				//设置地图显示的坐标,以及地图显示的类型. 
				this.map.setCenter(
					new LatLng(39.92,116.46)/*经纬度*/, 
					14, MapType.NORMAL_MAP_TYPE);   
			}

		]]>
	</fx:Script>
</s:Application>

执行效果：



清单1. 声明一个 Google地图对象

	<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
			  key="ABQIAAAA2eRN6ZN1rsKH7lbJgxrvfhQSQTm2lqzTPZ7_ZJNzt4c-sqjpuhTiqhgOloYpttEZu0iIUcVGzQP1kA"/>

这个地图对象初始化的时候会调用 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);   
}

后面的文章接着对地图进行深化开发。

【专业web 3d、webGL、flash 3d程序开发：北京贝武易科技公司】
flex程序培训，详情QQ:1539988257
贝武易-HTML5 3D技术联盟机构，提供研究、交流和培训机会，欢迎加入，地点：北京。
贝武易-HTML5 3D技术联盟群：49771294