使用 Yahoo! Maps Flash API

最新推荐文章于 2022-05-25 08:45:55 发布

GunGunSeeBlood

最新推荐文章于 2022-05-25 08:45:55 发布

阅读量1.5k

点赞数

文章标签： yahoo flash function actionscript api import

本文链接：https://blog.csdn.net/GunGunSeeBlood/article/details/1856291

版权

随着 Yahoo! Maps Beta 版 (一个基于 ActionScript 和 Flex 的地图应用程序) 的发布, Yahoo! 也发布了 Maps beta API。此 API 设计用于为您将许多增强功能和精确的地图数据集成到您自己的 Macromedia Flash 应用程序中提供独特的机遇。

Yahoo! Maps API 是作为一个 Flash 组件进行分发的, 并进行打包以轻松集成到您自己的代码中。因为 Yahoo! 服务于映射数据, 在您的一方除了使用该简单组件之外没有任何服务器要求。我带您完成快速组件安装 (与任何 MXP 打包的 V2 组件相同) 之后, 将立即与您一起复查几个复制和粘贴代码示例。在几分钟内, 将您构建一个基于地图的应用程序, 使用该应用程序您的用户可以平移、缩放, 甚至搜索和显示来自 Yahoo! 本地搜索的列表。

最棒的是, 多亏简单 API 调用的发明, 添加这些出色功能中的每一个只需要对很少几行代码有一个简单的了解。没有任何限制, 且您有超过一打的缩放级别来查看它。

要求

为了充分利用本文, 您需要以下软件和文件:

Macromedia Flash 8

注意: 您也可以使用 Macromedia Flash MX 2004。

Yahoo! Maps MXP* (Macromedia eXtensions Package 文件)

您需要一个应用程序 ID* 来使用该 AS-Flash API (需要 Yahoo! 登录)。

注意本文中的示例代码:

在本文中, 我将继续谈到非常复杂的 Yahoo! Maps Flash API 参考手册*。 Yahoo! 开发人员网络已搭建了一个很好的启动平台, 让您开始使用 Maps 组件。
该文章中的示例完全是复制和粘贴的代码摘录。在我鼓励您添加自己的元素时, 我希望尽可能为您开个好头。
为了实施所有代码示例, 您可简单地将它们添加到您的 FLA 文件的第一个帧中。为组件和 ActionScript 创建单独的层是很好的做法。
如果您使用诸如 Eclipse、PrimalScript 或 SEPYan 等 IDE, 您可以将该代码放到您的 AS 脚本或类文件中以使用您的应用程序。
使用新的 FLA 文件开始每个部分。这是我编写每个示例的方式, 它有助于重新了解正在呈现的独特功能。

关于作者

Charles (Chuck) Freedman 是 Yahoo!Maps 的一名高级 Flash 开发人员, 领导基于 Flex 的 Maps 应用程序的消费者和 API 版本的开发。 Chuck 拥有波士顿大学的电影和电视专业的传播学学位, 他将其在多媒体方面的教育背景与在内容管理、服务器端脚本编写及数据库和交互式设计方面的专业技术相结合。最近, 他制作了许多最高度可见的动态 Flash 内容, 为 eBay、eBay China 和 Fidelity 的主页开发模块。请访问其网站, 网址为 chuckstar.com*。 Chuck 出生于波士顿, 2005 年他加入 Yahoo! , 与妻子 Jamie 一起搬迁到阳光明媚的加州圣克拉拉。他还持有定期车票, 计划多次返回东部以观看他喜爱的 Red Sox 赢得另一次 World Series

让我们从头开始学。

安装组件:

下载 Yahoo! Maps MXP*。
双击 MXP 以启动 Macromedia Extension Manager。您可能需要下载最新的扩展管理器。在接受安装条款并单击“确定”之后, 将安全安装该 API。
从 Yahoo! 开发人员网络获取应用程序 ID* 。
启动 Flash 应用程序 (Flash MX 2004 或更高版本) 并展开“组件”窗口 (Ctrl + F7)。您应该看到在“组件”面板中列出的 YahooMap 组件。

设置工作区:

创建一个新的 Flash 文件。
将 YahooMap 组件拖到“工作区”中并保持它被选中。
在“属性”面板中, 保持 YahooMap 组件在“工作区”上被选中, 将 YahooMap 组件的实例命名为 myMap。 (本文中的所有代码摘录都将该地图实例称为“myMap”。)
在“属性”面板中, 或通过使用自由变形工具 (Q) 将该组件的大小调整为 500 x 400 像素。
回到“属性”面板中, 选择“参数”选项卡。输入您使用 Yahoo! 开发人员网络注册的 AppID。

看看这个世界:

编译 FLA 文件 (Ctrl + Enter)。
继续阅读并研究本文, 并了解如何可以改变您使用 Yahoo! Maps API 创建的这个世界。

工具和窗口组件: 控制地图

工具是一组行为, 您可以将它们添加到地图中以使用户更好地控制显示的内容。谈到地图交互时, 平移可能是频率最高的用户操作。在地图初始化之后马上导入 PanTool 类并创建其实例使用户可以在所有方向上单击并拖动地图。平移类添加单击和双击功能, 这两个功能分别在某个特定点上使地图居中和在某个特定点上放大地图:

import com.yahoo.maps.tools.PanTool; 
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     var panTool = new PanTool(); 
     myMap.addTool(panTool, true); 
}

提醒: 使用新的 FLA 文件开始每个部分。这是我在本教程中编写每个示例的方式。它有助于重新了解为每个部分呈现的独特功能。

NavigatorWidget 是一个非常整齐的界面, 它结合了基本的缩放栏和超级“minimap”导航工具。 Minimap 复制非常大的地图数据并将它按比例调整到一个小得多的窗口中。 Minimap 提供对大地图的精确导航, 就像一个巫毒娃娃 (voodoo doll)。

在 Minimap 的中心是一个可拖动的框 (有时将它称为“hockey puck”)。用户向上拖动该框时, 更大的地图也向上平移, 以此类推。处于 Minimap 中心的框也作为一个整体按比例调整到组件的显示比例。此窗口组件显示在地图的右上角:

import com.yahoo.maps.widgets.NavigatorWidget;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     var navWidget = new NavigatorWidget("open"); 
     myMap.addWidget(navWidget); 
}

NavigatorWidget 有两种状态 (打开和关闭), 可以通过在创建实例时传送初始状态对它们进行控制。关闭时, Navigator 仅显示垂直缩放栏。即使打开时, 用户仍可以通过单击小白箭头来关闭 Navigator (请参见图 1)。使用 Flash 形式的整齐的窗口组件在这两种状态之间设置动画。

图 1.具有可用于在区域上进行放大的 Minimap 的 NavigatorWidget

在下一组示例中, 我将更加详细地研究更改地图视图, 而添加 SatelliteControlWidget 是为用户提供切换地图视图的极佳方法的一种快速方式。 SatelliteControlWidget 包含三个按钮 (每个用于一种地图视图类型) 并在地图的左上角显示。

此示例显示, 您可以创建一个窗口组件的实例而不必将它保存到某个变量中。这会保存一行代码, 但将使调用此窗口组件上的方法更难。与 Navigator 不同, Satellite Control 没有任何打开/关闭状态:

import com.yahoo.maps.widgets.SatelliteControlWidget; 
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
     function onInitMap(eventData) { 
     myMap.addWidget(new SatelliteControlWidget());
}
地图视图: 正在变为卫星和混合
使用该 API 除了可以处理默认的地图平铺之外, 还可以处理卫星和混合平铺。 我将向您展示三个简单的显示方式并让您的用户选择与您的应用程序中的组件一起显示的不同种类的地图视图。
组件第一次加载时, 可以设置默认的地图视图类型。 在“工作区”上, 选择组件, 然后查看“参数”选项卡以选择地图视图类型。 组件会在第一次创建时收集此参数, 这为用户提供了最佳的体验。
若要以编程方式设置地图视图类型, 请使用 setMapViewType 方法。注意, 地图第一次是使用默认的类型加载的, 然后在初始化之后使用新的地图视图类型重绘: 
  
  
   
   import com.yahoo.maps.MapViews;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     myMap.setMapViewType(MapViews.SATELLITE); //for Hybrid use MapViews.HYBRID
}


  
  
该 API 为您提供了一些用于在组件外部更改地图视图类型的选项。 但通过使用 getMapViewTypes, 您获得了一个数组 (“地图”、“混合”、“卫星”)。 
下面的示例显示如何通过使用 getMapViewTypes() 构建您自己的地图视图按钮集, 这是我先前讨论过的 SatelliteControlWidget 的一种自定义替代方法。创建或附加您自己的按钮, 特别是在地图外部, 使您可以使用与应用程序一致的用户界面元素来控制地图。 当 SatelliteControlWidget 按钮相当小且设计紧凑时, 沿着地图放置按钮将使打开的地图区域稍大一些。
地图初始化之后, 就可以调用 getMapViewTypes() , 这会使所有地图视图类型的数组可用。 循环浏览此数组并调用 makeButton 函数, 传送迭代值和地图视图类型值: 

  
  

   
   myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
    var mapViews:Array = myMap.getMapViewTypes();
    for (var i=0;i< mapViews.length;i++) {
        makeButton(i, mapViews[i]);
    }
}


  
  
此处可以附加或创建按钮。 对像 makeButton 函数那样的函数编码使您可以创建一些简单的轻量按钮 (请参见图 2)。 通过增加 y 或 x 值, 您可以管理按钮的垂直或水平放置。 请务必在函数外设置 y/x 值的变量。 

图 2.将按钮添加到地图中
在此示例中, 我使用 _buttonX 变量在应用程序的上面布置按钮。 在 onPress 函数内, 您调用具有该标签值的 setMapViewType 。 这改变了用户单击每个按钮时的地图视图。 您还可以使用一个简单的条件来跟踪按钮的状态。 为此, 您将需要使用另一个方法 getCurrentMapViewType。当按钮中的文本代表活动地图类型时, 它将使用粗体: 

  
  

   
   var _buttonX:Number = 0;
var _selButton;
function makeButton(i:Number, mapView:String) {
    var buttonBase:MovieClip = this.createEmptyMovieClip("buttonBase"+I, i);
    buttonBase._x = _buttonX;
    buttonBase.moveTo(0, 0);
    buttonBase.lineStyle(1, 0x000000, 100);
    buttonBase.beginFill(0x999999, 100);
    buttonBase.lineTo(100, 0);
    buttonBase.lineTo(100, 22);
    buttonBase.lineTo(0, 22);
    buttonBase.lineTo(0, 0);
    var buttonLabel:TextField = buttonBase.createTextField("buttonLabel", 1, 0, 0, 100, 22);
    buttonLabel.id = mapView;
    buttonLabel.html = true;
    buttonLabel.selectable = false;
    
    if (mapView == myMap.getCurrentMapViewType()) {
        buttonLabel.htmlText = "<b>" + mapView + "</b>";
        _selButton = buttonLabel;
    } else {
        buttonLabel.htmlText = mapView;
    }

    buttonBase.onPress = function () {
        this._parent.myMap.setMapViewType(buttonLabel.text);
        _selButton.text = _selButton.id;
        buttonLabel.htmlText = "<b>" + buttonLabel.text + "</b>";
        _selButton = buttonLabel;
    }

    _buttonX+=120;
}


  
  
查看 Yahoo! Maps Flash API 参考手册*以查明如何可以使用您自己的按钮来控制地图的许多其他方面。
 
 
覆盖: 局部搜索功能
将覆盖看作地图上面的潜在的天气系统。 本质上, 它们是在单一层内用于管理地图上面的多个标记和电影剪辑的一个容器。 覆盖独立于核心地图管理数据。 初始化它们之后, 就能以编程方式打开或关闭它们了。
将 LocalSearchOverlay 添加到地图和应用程序中为您的用户在强大的 Yahoo! 本地数据库和服务中提供了一个网关。 地图初始化之后, 请创建 LocalSearchOverlay 的一个新实例。 建议将覆盖实例保存到某个全局变量中。 这使得该覆盖实例可用于后续示例中的其他函数。 使用 addOverlay 将覆盖实例添加到地图中。 
使用标记时, 让用户平移是很好的事情, 因此我建议添加 PanTool。 而因为这是本地内容, 请通过使用 setCenterByAddress() 将 Chicago 设置为默认城市。最后, 请使用 makeLocalSearch() 来构建表单元素, 这使用户能够输入他们自己的本地搜索条件: 

  
  

   
   var _localSearch;
import com.yahoo.maps.overlays.LocalSearchOverlay;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
    _localSearch = new LocalSearchOverlay(); 
    myMap.addOverlay(_localSearch);
    var panTool = new PanTool(); 
    myMap.addTool(panTool, true); 
    myMap.setCenterByAddress("Chicago");
    makeLocalSearch();
}


  
  
这一简单的 makeLocalSearch 函数可构建一个文本输入字段和按钮。 如前所述, 构建卫星按钮时, 可以使用附加组件或自己的图形元素: 

  
  

   
   var _searchInput:TextField;
function makeLocalSearch() {
    
    var inputBase:MovieClip = this.createEmptyMovieClip("inputBase", 1);
    inputBase._x = 0;
    inputBase.width = 100;
    inputBase.height = 22;
    _searchInput = inputBase.createTextField("searchInput", 1, 0, 0, 100, 22);
    _searchInput.border = true;
    _searchInput.background = true;
    _searchInput.selectable = true;
    _searchInput.type = "input";
    _searchInput.text = "Pizza";
    
    var searchButton:MovieClip = this.createEmptyMovieClip("searchButton", 2);
    searchButton._x = 120;
    searchButton.moveTo(0, 0);
    searchButton.lineStyle(1, 0x000000, 100);
    searchButton.beginFill(0x999999, 100);
    searchButton.lineTo(100, 0);
    searchButton.lineTo(100, 22);
    searchButton.lineTo(0, 22);
    searchButton.lineTo(0, 0);
    var searchLabel:TextField = searchButton.createTextField("searchButton", 1, 0, 0, 100, 22);
    searchLabel.selectable = false;
    searchLabel.text = "Search";
    
    searchButton.onPress = function () {
        this._parent.searchLocal();
    }
}


  
  
我将添加的另一个效果是一个事件, 在该事件中, 地图上的地址解析它自己之后, 就立即会在地图上放大。 处理本地内容时, 离得越近, 显示的搜索结果就越相关: 

  
  

   
   myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_MAP_GEOCODE_SUCCESS, onMapMove); 
function onMapMove(eventData) {
    myMap.setZoomLevel(5);
}


  
  
LocalSearchOverlay 使用 search 方法来查询本地数据库。 搜索 Yahoo! 本地数据库 (在使用硬编码搜索条件的情况下), 返回的数据是使用覆盖内附加的标记显示的。 
这些标记代表本地列表, 包括地址、等级数据和到 Yahoo! Locals 的“详细信息”链接, 为用户提供了一个极好的资源并增加了在地图中显示的区域的深度 (请参见图 3)。 地图完成缩放时, 且更加重要的是, 每次用户单击“提交”按钮时, 您的应用程序将调用 searchLocal(): 。 
 
图 3.使用 Yahoo! Local 内容的地图, 以标记内的地址和等级数据为特色。
在第一次通过时, 我需要插入一个变量。 因为我使用 Chicago 作为位置, 我的默认搜索条件正是“Pizza”: 

  
  

   
   myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_ZOOM_STOP, searchLocal); 
function searchLocal(eventData) {
    var searchVar:String = "";
    if (_searchInput.text == undefined) {
        searchVar = "Pizza";
    } else {
        searchVar = _searchInput.text;
    }
    _localSearch.search(searchVar, this._parent.myMap.getCenter(),  1, 10);
}


  
  
请在Yahoo! Maps Flash API 参考手册*中, 查找关于 LocalSearchOverlay 的详细信息及其方法。
 
 
Geocoding: 将地址转换为纬度/经度
Geocoding 位于地图数据的中心。它是地图计算机的“flux capacitor”。 不管它们是在 Flash 还是在 Ajax 中构建的, 所有地图应用程序都使用某些形式的 geocoding 来解析全球的坐标并提供几个关键地图功能, 如定位地址、计算驾驶方向及显示交通状况都使用 geocoding。
在 Flash 地图中, 我们获得坐标 (纬度和经度, 或我们所说的“经纬度 (latlon)”) 并在应用程序中将它们转换为点 (x 和 y)。 在应用程序中确定用户平移或缩放到的位置时, 我们将从点到经纬度 (latlon) 的过程反过来就可以了。
在这最后一个练习中, 我向您显示如何基于地图的中心点解析经纬度。 在创建您自己的 mashup 时, 您可能会发现此技术很有用。如果您要开始在地图上绘制点 (添加标记及进行类似操作), 您很可能会创建您自己的 RSS (对于地图点, 称为 geoRSS) 、XML 或数据库来存储这些点。
存储经纬度坐标与存储和处理地址字符串相比, 效率会高得多, 并提供更好的性能。 另一个益处是, 通过将经纬度而非地址字符串传送给方法, 会具有更多以编程方式控制地图的选项。
首先, 导入 LatLon 类, 使用该类可以将点转换为经纬度对象。 若要获得初始地图中心坐标, 请在地图首次初始化时使用 getCenter(): 

  
  

   
   import com.yahoo.maps.LatLon;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
    var pantool = new PanTool();
    myMap.addTool(pantool, true);
    var points = myMap.getCenter();
    convert(points);
}


  
  
通过使用首选的调试方法 (如 trace()), 显示由 getCenter() 方法返回的值。此方法返回与纬度和经度顺序相反的点、值。 换句话说, 且这可能很棘手, x 和 y 代表点的水平和垂直位置, 而纬度和经度代表的正好相反: 纬度是垂直位置, 而经度是水平位置。
正如我早先谈到的那样, 基于地图交互和移动, 会发生几个其他事件。 将 EVENT_MOVE 监听器添加到地图中最终将使您可以在每次用户移动地图时调用 getCenter() 。

  
  

   
   myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_MOVE, onMapMove);
function onMapMove() {
    var points = myMap.getCenter();
    convert(points);
}


  
  
最后, 获得由 getCenter() 返回的对象并创建一个伴随它的新的 LatLon 对象, 这样会将那些点转换为纬度和经度。 记住, 您需要切换这些值来获得正确的点。 完成此操作的最佳方式是通过分别获得纬度和经度属性“lat”和“lon”。 添加 trace() 方法应该会在输出窗口中显示您的纬度/经度。

  
  

   
   var _latlon:Object;
function convert(points:Object) {
	_latlon = new LatLon(points.lat, points.lon);
	trace(_latlon);
}


  
  
在 Yahoo!Maps Flash API 参考手册*中, 可以找到可以使用经纬度值调用的许多方法。
下一步工作 
我希望这些代码示例可以为您开发自己的地图 mashup 提供一个很好的开头。 请务必访问 Yahoo! 开发人员网络的出色涵盖内容和 Yahoo! Maps API* 的示例。
致谢
特别感谢 Zach Graves, 是他以其专业技术对本文进行了技术方面的审阅。

GunGunSeeBlood

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 Yahoo! Maps Flash API

随着 Yahoo! Maps Beta 版 (一个基于 ActionScript 和 Flex 的地图应用程序) 的发布, Yahoo! 也发布了 Maps beta API。此 API 设计用于为您将许多增强功能和精确的地图数据集成到您自己的 Macromedia Flash 应用程序中提供独特的机遇。Yahoo! Maps API 是作为一个 Flash 组件进行分发的, 并进行打包以轻
复制链接

扫一扫