Posts Tagged "Google Map API"

在Flex中应用Google Map API建立地图应用

今天突然发现,Google Maps API 除了提供能被 Ajax 应用程序调用的 JavaScript 接口之外,还提供了能被 Flash 应用程序调用的 Flex 语言接口。一时兴趣,就做了个试验,用Flex实现我家了地理位置展示。

Flex 简介


  Flex是Adobe公司推出的技术,基于Flash平台,开发的程序可以运行于装有Flash Player插件的浏览器以及Adobe的桌面程序运行平台AIR之上,具有很好的表现力和交互力。官方网站上对Flex的定义如下:
  Adobe® Flex® 3 是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。
  相对于Ajax,Flex的优点是易于开发调试,表现力交互力强,缺点是加载速度慢。在兼容性方面,我觉得Flex更好。

 
Google Map API for Flash介绍


  Google Maps API for Flash 使得 Flex 开发人员能够把 Google Map 嵌入到 Flex 应用程序中。该 API 提供了很多实用的工具用来操控 Google Map。利用该 API,您可以处理地图事件、添加地图控件、在地图上添加标记、或者在地图上面画线,也可以利用 Geocoding 将地址转换成经纬度数据。 


开发环境准备


  开发Flex应用,您需要Flex SDK或Flex Builder,前者是Adobe公司提供的开源软件开发工具包(Software Development Kit),后者是基于Eclipse专注于Flex开发的IDE.(很容易理解,Flex SDK与Flex Builder的关系犹如JDK & Eclipse).在这里,使用的是Flex Builder进行开发

一、申请Google Map API Key

申请地址:http://code.google.com/intl/zh-TW/apis/maps/signup.html

如下图所示:(请注意,如果是在本机测试,请填写http://127.0.0.1)
  flex-googlemap01接着,获取到相应的Key:
ABQIAAAARNDU8d2SSTu0rXH-GjUeMBQO8aZUyAkW5UsAyLn97mDEIA1eVxTeKnSG1ArDXiJAO5kuBkAFTCw9iw

flex-googlemap02

Google 站点 下载 Google Maps API for Flash SDK 到本地硬盘并解压。解压后在 lib 目录下会有两个 swc 文件,这些 swc 文件包含开发 Google Maps API for Flash 应用程序要用到的所有 ActionScript 类。在用 Flex 开发 Google 地图应用程序时,必须把后缀为 _flex 的 swc 文件加到项目的 Library path 中。

   好了,接下来我们就可以在Flex Builder里开发应用了,这Flex Builder中建立一个Web Project,本人编写的代码如下:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
    <maps:Map xmlns:maps=”com.google.maps.*” id=”map” mapevent_mapready=”onMapReady(event)” width=”100%” height=”100%”
    key=”ABQIAAAARNDU8d2SSTu0rXH-GjUeMBQO8aZUyAkW5UsAyLn97mDEIA1eVxTeKnSG1ArDXiJAO5kuBkAFTCw9iw”/>
<mx:Script>
<![CDATA[
import com.google.maps.InfoWindowOptions;
import com.google.maps.controls.MapTypeControlOptions;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControlOptions;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.OverviewMapControlOptions;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.controls.PositionControlOptions;
import com.google.maps.controls.PositionControl;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.MapType;
private function onMapReady(event:MapEvent):void {       
this.map.setCenter(
        new LatLng(22.0473,111.0112)/*经纬度*/, 17,  MapType.NORMAL_MAP_TYPE);   
        //显示方向的按钮,用来移动地图
        map.addControl(new PositionControl(new PositionControlOptions()));
        //显示缩略图
        map.addControl(new OverviewMapControl(new OverviewMapControlOptions()));
       //显示刻度来放缩地图
       map.addChild(new ZoomControl(new ZoomControlOptions()));
       //显示地图的四种类型以随意切换
       map.addControl(new MapTypeControl(new MapTypeControlOptions()));
       map.enableScrollWheelZoom();
       map.enableContinuousZoom();
       var address:LatLng = new LatLng(map.getCenter().lat(),map.getCenter().lng());
map.openInfoWindow(address, new InfoWindowOptions({title: "Hi", content: "这是我的家"}));
}
]]>
</mx:Script>
</mx:Application>
<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
   <maps:Map xmlns:maps=”com.google.maps.*” id=”map” mapevent_mapready=”onMapReady(event)” width=”100%” height=”100%”
    key=”ABQIAAAARNDU8d2SSTu0rXH-GjUeMBQO8aZUyAkW5UsAyLn97mDEIA1eVxTeKnSG1ArDXiJAO5kuBkAFTCw9iw”/>
<mx:Script>
<![CDATA[
 import com.google.maps.InfoWindowOptions;
import com.google.maps.controls.MapTypeControlOptions;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControlOptions;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.OverviewMapControlOptions;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.controls.PositionControlOptions;
import com.google.maps.controls.PositionControl;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.MapType;
private function onMapReady(event:MapEvent):void {       
this.map.setCenter(
        new LatLng(22.0473,111.0112)/*经纬度*/, 17,  MapType.NORMAL_MAP_TYPE);
           //显示方向的按钮,用来移动地图
        map.addControl(new PositionControl(new PositionControlOptions()));
         //显示缩略图
        map.addControl(new OverviewMapControl(new OverviewMapControlOptions()));
       //显示刻度来放缩地图
       map.addChild(new ZoomControl(new ZoomControlOptions()));
       //显示地图的四种类型以随意切换
       map.addControl(new MapTypeControl(new MapTypeControlOptions()));
       map.enableScrollWheelZoom();
       map.enableContinuousZoom();
       var address:LatLng = new LatLng(map.getCenter().lat(),map.getCenter().lng());
map.openInfoWindow(address, new InfoWindowOptions({title: "Hi", content: "这是我的家"}));
}
]]>
</mx:Script>
</mx:Application>

程序运行结果如下:
(刘二大排档,是我家楼下的店铺。旁边的司令大排档,曾经,我、栋科和林泳三哥们在那儿大吃了一顿,哈哈,好想家了)