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

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

查看更多 下一篇