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的:

Mxml代码 
XML/HTML代码
  1. var markerA:Marker = new Marker(
  2. new LatLng(48.858842, 2.346997),
  3. new MarkerOptions({
  4. //strokeStyle: new StrokeStyle({color: 0×987654}),
  5. //fillStyle: new FillStyle({color: 0×223344, alpha: 0.8}),
  6. //radius: 12,
  7. //hasShadow: true
  8. }));
  9. 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%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0/

Mxml代码

XML/HTML代码
  1. markerA.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent){mark_click(e,markerA)});
  2. private function mark_click(evt:MapMouseEvent,mark:Marker):void{
  3. mark.openInfoWindow(new InfoWindowOptions({title: "Hello", content: "这是我在丹东的家"}));
  4. }

mark_click就是事件处理函数,这样,就可以实现对事件的响应了。

结束语

现在关于GoogleMapsAPI的资料真难找,实现这样的简单功能就用了半天的时间。要多多加油了。看文档要仔细,这样会避免因为字面意思的理解导致的时间的浪费。代码见附件。希望对大家有所帮助。

转载于:https://www.cnblogs.com/zhych/archive/2009/06/25/1511281.html

Google Maps API 中的标注编程相关推荐

  1. Google maps API开发

    Google maps API开发 注:经纬度的查询,找了半天,终于找着活神仙了,(*^__^*) 嘻嘻-- 1.经纬度查询工具:http://www.playgoogle.com/googlemap ...

  2. Google Maps API V3 之 图层

    图层概述 图层是地图上的对象,包含一个或多个单独项,但可作为一个整体进行操作.图层通常反映了您添加到地图上用于指定公共关联的对象集合.Maps API 会通过以下方法管理图层内对象的显示形式:将图层的 ...

  3. ASP.NET调用V3版本的Google Maps API

    英文原文:Google Maps API V3 for ASP.NET 译文出处:青藤园 译文作者:王国峰 译文链接:ASP.NET中使用Google Maps API V3[译] 简介 Google ...

  4. Google Maps API编程资源大全

    Google Maps API是Google自己推出编程API,可以让全世界对Google Maps有兴趣的程序设计师自行开发基于Google Maps的服务,建立自己的地图网站.以下是我在Googl ...

  5. maps-api-v3_利用Google Maps API发挥创意

    maps-api-v3 您已经设计了一个闪亮的新网站: 仔细选择颜色,版式和照片,以完美反映公司的品牌形象. 然后您的客户要求您添加地图. 当然,您可以使用地图构建"向导",例如每 ...

  6. Google Maps API 代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Google Maps API v3:如何删除所有标记?

    本文翻译自:Google Maps API v3: How to remove all markers? In Google Maps API v2, if I wanted to remove al ...

  8. 如何使用Google Maps API禁用鼠标滚轮缩放

    我正在使用Google Maps API(v3)在页面上绘制一些地图. 我想做的一件事是在地图上滚动鼠标滚轮时禁用缩放,但我不确定如何. 我已禁用scaleControl(即删除了缩放UI元素),但这 ...

  9. maps-api-v3_Android Google Maps API集成

    maps-api-v3 In this tutorial we'll show how to integrate android google maps API in our application ...

  10. 使用Google Maps API和google-maps-react进行React Apps

    This tutorial aims at integrating the google maps API to your React components and enabling you to d ...

最新文章

  1. 小米平板android版本,除了安卓MIUI7,小米平板2为什么要推出Win10版?
  2. python编程100例画图-Python练习实例56 | 画图,学用circle画圆形
  3. LYNC显示用户位置的相关配置
  4. CentOS下安装网卡驱动
  5. SCI、Ei投稿指南
  6. 《Linux菜鸟入门2》LVM
  7. pytorch拼接与拆分
  8. bootstrap下拉框分页_学习使用Bootstrap输入框、导航、分页等常用组件
  9. 腾讯校园招聘笔试 2019-8-17 第四题 另一种解法
  10. 谷歌浏览器input中的text 和 button 水平对齐的问题
  11. axure图表组件。echarts。 axure !important 二维码logo嵌入axure汉化美化定制。图表背景透明
  12. yb3防爆电机型号含义_YBX3防爆电机
  13. RainMeter使用教程一篇
  14. 苹果手机一直显示搜索服务器,苹果手机safari浏览器搜索页面没有了
  15. 苹果市值超过微软 重新成为全球市值最高上市公司
  16. movieclip颜色
  17. Idea中如何查看pom中dependency Analyzer的快捷键
  18. VS将复制过来的文件或文件夹显示到解决方案管理
  19. 佛山市妇幼保健院 CIO 马丽明:以超融合加速智慧妇幼信息化建设
  20. MySQL数据库实验五 触发器和存储过程

热门文章

  1. 【Cadence 17.2】02 添加封装库/焊盘库
  2. Flask第十八篇 Flask-Migrate
  3. DVWA中学习PHP常见漏洞及修复方法
  4. pix 506E拨号上网设置
  5. Centos6.5安装tocmat7 配置以及优化
  6. UITextFiled 简介
  7. [转]关于管理的经典故事(员工激励)
  8. 【VirtualBox】VirtualBox的四种网络连接模式
  9. oracle 获取多个序列值,一次性获取多个oracle序列值问题
  10. python深复制_Python深浅拷贝