Google Maps API（Flash 版）- Flash CS3 教程

设置 Flash CS3
编写 Google Maps API（Flash 版）的“Hello World”
创建项目
编写代码
打开操作编辑器
导入库
声明地图
设置地图大小
设置事件侦听器
附加地图
测试 Flash 影片
导出 SWF 文件
在网页中托管 SWF 文件
本教程假设您已经购买并安装了 Flash CS3 应用程序。有关 Flash 编写应用程序的详细信息，请访问 http://www.adobe.com/products/flash。

在 Flash CS3 内进行开发不需要了解 Flex。如果您改为使用 Flex Framework 开发 Flash 应用程序，请查看FlexBuilder 教程 或 Flex SDK 教程。

设置 Flash CS3
在开始在 Flash CS3 中编写 Google 地图应用程序时，首先需要将 Google Maps API（Flash 版）的 SWC 组件添加到 Flash CS3 中。要这样做，请执行以下操作：

如果 Flash CS3 当前处于打开状态，请退出该应用程序。

浏览至您保存 Google Maps API（Flash 版）SDK 的位置并找到接口库的非 Flex 版本（例如 lib/map_1.7.swc）。

在以下某一位置创建一个“Google”目录并将 SWC 文件复制到此位置：

(Windows) C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components

（请注意，Flash CS3 支持的每种语言都有一个单独的目录。将 SWC 文件放在您编写 Flash 内容要使用的语言所对应的目录中。）

(Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components
请勿复制该文件的 Flex 版本。Flex 版本仅支持进行 FlexBuilder 或 Flex SDK 开发。

Flash CS3 现在设置为支持 Google Maps API（Flash 版）。

编写 Google Maps API（Flash 版）的“Hello World”
了解怎样在 Flash CS3 中构建 Google Maps API（Flash 版）应用程序的最简单方法是了解一个简单的示例。在本教程中，我们会创建一个简单的 Flash 影片、添加一段 ActionScript 代码、将该文件导出为 SWF 文件并在浏览器中启动该文件以进行肉眼检测。

创建项目
将 Google Maps API（Flash 版）组件添加到 Flash CS3 后，启动 Flash 应用程序并从“欢迎”屏幕上选择新建 -> Flash 文件 (ActionScript 3.0)。


（如果您没有看到“欢迎”屏幕，则选择文件 -> 新建，并从新建文档对话框中选择 Flash 文件 (ActionScript 3.0)。）

Flash CS3 会启动并显示空白画布（称为“舞台”）。如果尚未显示时间轴窗格，则通过选择窗口 -> 时间轴来显示它。


选择窗口 -> 组件。将显示组件对话框。点击 Google 选择器以显示 GoogleMapsLibrary 组件。


点击 GoogleMapsLibrary 并将其拖动到“舞台”。一个浅蓝色的边界框会显示在空白舞台中。请勿担心是否可以正确定位该组件，因为该框不影响地图的实际定位。

编写 Google 代码
使用 ActionScript 3.0 代码在 Google Maps API（Flash 版）中操控地图。本教程不会详细介绍 ActionScript。可在以下位置中获得有关 ActionScript 的在线教程：

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
http://www.adobe.com/devnet/flex/quickstart/coding_with_mxml_and_actionscript/
打开操作编辑器
在 Flash CS3 的时间轴窗口中，在选择的帧上单击鼠标右键，然后选择操作选项。将显示操作 - 帧对话框。确保从下拉菜单中选择 ActionScript 3.0，然后在编辑区域中输入以下代码。（我们将在后面的部分中介绍该代码。）


（下面提供了此代码以供您剪切和粘贴。）

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

var map:Map = new Map();
map.key = "your_api_key";
map.setSize(new Point(stage.stageWidth, stage.stageHeight);
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:Event):void {
map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}即使在此简单的代码段中，也有几点需要注意：

从 com.google.maps.* 命名空间中导入一组库。

实例化一个 Map 对象并设置 map 的 API 密钥。

将 map 的大小设置为适合舞台的大小。

添加事件侦听器以在地图准备好显示时通知我们。

将地图附加到 Flash 影片中。

在该事件侦听器中，使地图以曼哈顿为中心。

下面将详细介绍这些步骤。

导入库
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;通过 import 声明导入 ActionScript 库。在以上示例代码中，导入了几个 Google Maps Flash 库。要成功编译 SWF 文件，应确保导入您在示例代码中使用的类型的库。建议您只导入需要的类。

声明地图
var map:Map = new Map();
map.key = "your_api_key";com.google.maps.Map 对象是 Google Maps API（Flash 版）库中的基本对象。我们在此实例化一个 Map 对象并将其分配给 map 变量。然后，将 map 的 key 属性设为注册的 API 密钥。

请注意：除了本教程外，该文档集中的代码示例也使用 Flex Framework。对于大多数情况，该代码可以在 Flash CS3 中使用。但是，您至少要创建一个 map 变量（如此处所示）以引用 Map 实例，还要设置 map 并将其直接关联到 Flash 影片对象（如本教程中所示）。

设置地图大小
map.setSize(new Point(stage.stageWidth, stage.stageHeight);为了简化起见，我们希望地图的大小适合 Flash 舞台的大小。我们可以通过将 map 的大小设为整个 stage 对象的 stageHeight 和 stageWidth 属性来强制实现该约束。

注意！在该文档集提供的 Flex 示例中，无需使用 setSize 方法来设置具体的大小。但是，Flash CS3 开发人员需要添加该方法才能使用这些示例。

设置事件侦听器
map.addEventListener(MapEvent.MAP_READY, onMapReady);ActionScript（类似 JavaScript）是一种事件驱动编程语言。通过针对特定事件在对象上注册事件侦听器来处理在 Flash 对象内的用户互动。

我们在此将事件侦听器添加给 MapEvent.MAP_READY 事件的 Map 对象。该事件处理程序作为“钩子”来初始化 Google Maps API（Flash 版）应用程序。当地图收到该事件后，它会调用 onMapReady 函数（如下所示）。

function onMapReady(event:MapEvent):void {
setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}该 onMapReady() 函数会传递类型为 MapEvent 的 event 参数（在本例中忽略），然后使用指定参数（定义要显示的地图的位置、缩放级别和类型）调用 setCenter()。

请注意：您还可以通过截获和处理 MapEvent.MAP_PREINITIALIZE 事件来初始化地图。有关该事件的信息，请参见对 MapOptions 的介绍。

在 Google Maps Flash 文档的地图事件部分中对事件进行了详细介绍。

附加地图
this.addChild(map);最后，我们需要将 map 附加到 Flash 影片本身。通过调用 this.addChild(map) 实现该操作。请注意，我们使用 this 关键字来直接访问 Flash 根组件（在本例中为时间轴对象）。

测试 Flash 影片
我们现在已准备好启动 Flash 影片。选择控制 -> 测试影片。Flash CS3 会编译 ActionScript 代码并启动内部 Flash 播放器以进行调试。您应可以看到以曼哈顿为中心的小地图。


请注意，由于该 SWF 文件是通过本地文件系统访问的，因此会在调试模式下显示。

导出 SWF 文件
如果一切顺利，我们会创建一个 SWF 文件，然后可以发布该文件以在公用网站上外部使用。要这样做，请执行以下操作：

选择文件 -> 导出。会显示导出影片对话框。


为您的文件选择名称（例如MapSimple.swf）并将格式保留为 Flash 影片。会显示导出 Flash 播放器对话框。


确保将本地回放安全性: 设置为仅访问网络。这样可以确保 Flash 播放器可与 Google 的服务器进行通信，以检索地图 API 库。

点击确定，系统会创建 SWF 文件。

如果双击该文件，则会启动默认浏览器，然后我们可以直接检测该 SWF 文件。请再次注意，由于该文件是通过本地文件系统访问的，因此会在调试模式下显示。


在网页中托管 SWF 文件
Google Maps Flash SWF 文件如果是使用附带的 API 密钥编译的，那么可以简单地显示为单独的文件。这一点在进行测试时很有用，但可能不适合进行适当的页面布局。因此，您可能需要设置 HTML 页面以包含该 SWF 文件。为了确保您的 SWF 文件可在 Internet Explorer 和其他浏览器中执行，您应在 object 和 embed 标签中都添加 SWF。

下面显示了包含 MapSimple.swf 文件的简单 HTML 页面。要让地图在网页上显示，必须为其留出一个位置。本例中，我们通过创建指定的 div 元素并向该元素添加 object 元素来完成此操作。

<div id="map_canvas" name="map_canvas">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="800px"
height="600px">
<param name="movie" value="MapSimple.swf">
<param name="quality" value="high">
<param name="flashVars" value="key=your_api_key">
<embed
width="800px"
height="600px"
src="MapSimple.swf"
quality="high"
flashVars="key=your_api_key"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div>请注意，我们在 flashVars 参数中添加 API 密钥参数。该注册方法是直接在 ActionScript 代码中将密钥编译成 SWF 文件（通过分配 map.key）的方法的备用方法。如果在此指定值，则这些值会覆盖 SWF 文件所包含的值。另请注意，API 密钥必须和托管“SWF”文件的域匹配，而不是与可能用来托管 HTML 文件的域匹配。

下面显示了生成的 HTML 页面。


下载 Flash 文件 (SimpleMap.fla)


恭喜您！您已经编写好了您的第一个 Google Maps Flash 应用程序！

• 点赞
• 收藏
• 分享
• 文章举报

iteye_9235 发布了3 篇原创文章 · 获赞 0 · 访问量 81 私信 关注