级别: 初级
作者:elprup
2009 年 6 月 17 日
Google Maps API 除了提供能被 Ajax 应用程序调用的 JavaScript 接口之外,还提供了能被 Flash 应用程序调用的 Flex 语言接口。本文就将介绍如何用 Google Maps API for Flash 来开发基于 Flash 的地图应用程序中,关于地图标注的部分。
Flex 简介
Flex 是 Abode 公司贡献的一个开源框架,用于快速构建和维护高度交互并具有丰富表现力的互联网应用( Rich Internet Application )。这些 RIA 应用程序既可以通过 Adobe Flash Player 部署在所有主流的浏览器上,也可以通过 AIR(Adobe Integrated Runtime) 部署在所有主流操作系统的桌面上。
一个 Flex 应用程序通常有 ActionScript 和 MXML 两种代码组成。ActionScript 是一种面向对象的脚本语言,符合 ECMAScript 标准,用于实现 Flex 应用程序的逻辑;MXML 是一种类似于 HTML 和 XML 的标记语言,用于构建 Flex 应用程序的用户界面。Flex 应用程序最终需要被编译成 SWF 文件以运行在 Adobe Flash Player 或 AIR 上。
本文并不详细讲述 MXML 和 ActionScript 的语法,如想了解这两种语言的用法,可以查看 参考资源 中的相关教程。
Google Maps API for Flash 简介
Google Maps API for Flash 使得 Flex 开发人员能够把 Google Map 嵌入到 Flex 应用程序中。该 API 提供了很多实用的工具用来操控 Google Map。利用该 API,您可以处理地图事件、添加地图控件、在地图上添加标记、或者在地图上面画线,也可以利用 Geocoding 将地址转换成经纬度数据。笔者写作期间 Google Maps API for Flash 还不支持 AIR 环境,只能在 Flash Player 里运行。
开始创建简单的地图应用
这里可以参考
http://www.ibm.com/developerworks/cn/web/wa-lo-flexgoogle/
写的一个教程,这个教程详细介绍了地图应用的创建,并且有实例。
在地图上创建标注
首先简单的介绍一下google maps在Flash环境下的标注。标注是作为一个overlay加入应用程序的,英文名为marker,可以再googleAPI中找到
http://code.google.com/apis/maps/documentation/flash/reference.html#Marker
所以我们的任务就是加入一个marker的overlay。下面一段代码就是创建这个marker的overlay的:
var markerA:Marker = new Marker(
new LatLng(48.858842, 2.346997),
new MarkerOptions({
//strokeStyle: new StrokeStyle({color: 0x987654}),
//fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
//radius: 12,
//hasShadow: true
}));
googleMap.addOverlay(markerA);
首先创建一个marker对象,其中latlng是googlemap自己定义的表明位置的对象,markerOption用于初始化marker的信息,可以为空,具体的信息可以查找googlemapsapi。最后是把这个图层加入到我们创建好的googlemap对象中。这样,就可以看见图上有标注了。
捕捉标注点击动作
创建标记后,点击标记没有任何反应,于是需要我们来创建一个标记的事件处理函数。marker可以用addEventListener的方法来创建处理鼠标事件的函数。这个函数的第一个参数是鼠标事件,这里特别注意,需要用MapMouseEvent中的动作定义,不能直接写flash中的事件定义。然后是事件处理函数。因为处理函数需要知道marker对象,用来打开marker的窗口,marker需要作为参数传递过去。然而,默认的addEventListener不能传递除鼠标事件外的参数。我在网上查了一下,需要用一下的方式解决,详细的方法可以参考:
http://www.flashj.cn/wp/flashria/addeventlistener事件监听传递参数/
markerA.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent){mark_click(e,markerA)});
private function mark_click(evt:MapMouseEvent,mark:Marker):void{
mark.openInfoWindow(new InfoWindowOptions({title: "Hello", content: "这是我在丹东的家"}));
}
mark_click就是事件处理函数,这样,就可以实现对事件的响应了。
结束语
现在关于GoogleMapsAPI的资料真难找,实现这样的简单功能就用了半天的时间。要多多加油了。看文档要仔细,这样会避免因为字面意思的理解导致的时间的浪费。代码见附件。希望对大家有所帮助。
分享到:
相关推荐
Google Maps API编程资源大全
├─06 Google Maps API高级编程 │ ├─6.1 GPolyline折线对象和GPolygon多边形对象 │ │ ├─6.1.1 使用GPolyline折线对象 │ │ ├─6.1.2 使用GPolygon多边形对象 │ │ ├─6.1.4 使用GPolyline和GPolygon的...
Google+Maps+API编程资源大全 Google+Maps+API编程资源大全 Google+Maps+API编程资源大全
书中详细介绍Google Maps API的应用,从开发环境搭建到事件、控件、叠加层、地址解析、本地搜索等,全面介绍,网点管理系统和地图搜索应用实例。
Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.
Google Maps API开发大全code.rar Google Maps API开发大全code.rar
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载,及自我编制。 离线下完全可以使用,只需先进行地图的下载。 添加了控件,离线下可进行操作。。。
Google Maps API示例CHM文档下载
│ ├─7.2 挖掘Google Maps API中未公开的功能 │ │ ├─7.2.1 为Google地图添加鸟瞰地图 │ │ ├─7.2.2 最大化GInfoWindow信息窗口 │ │ └─7.2.3 设定GMarker地标的Z轴坐标 │ ├─7.3 自定义Google地图 │ ...
本书从易到难、由浅入深、循序渐进地介绍了Google Maps API和Google Earth API的开发技术。本书知识讲解通俗易懂,并有大量的实例供读者更加深刻地巩固所学习的知识,帮助读者更好地进行开发实践。 本书共分为18...
Google Maps API开发大全 (华章原创精品) - 陈育春.mobi
用于 JavaScript 的 Google Maps API V3 中文参考文档 与官网文档格式基本相同
– HelloWorld程序,Maps控件,事件处理,信息窗口,层,点、折线以及多 边型等 • 高级功能简介 – 异步HTTP通讯:GXmlHttp, GDownloadUrl – 创建自己的控件:控件子类化 – 地址定位 • 最新功能 – KML与GeoRSS...
google maps api 开发大全 的光盘源代码 网上找了个遍,也没找到。 就自己买了这本书,现在发上来了,呵呵。
Kindle资源,Google Maps API开发大全。可使用Kindle PC端的软件阅读。
Google Maps API开发大全Google Maps API开发大全Google Maps API开发大全
java实现google maps api接口实例
Google Maps JavaScript API V3应用