在Flex中显示Yahoo! Maps

首先我们先看看如何在Flex中显示Yahoo! Maps，在您的根目录yahooMap下，新建一个mxml文件。并且类似下面的方法在mx:Application标签添加Yahoo! Maps的命名空间:

<mx:Application xmlns:mx=”http://www.macromedia.com/2003/mxml”

 xmlns:yahoo=”com.yahoo.maps.api.flex.*”

 xmlns:local=”*”

 xmlns:=”*” >

然后创建一个新的Yahoo! Maps 标签, yahoo:YahooMap, 该标签将在您的应用中显示地图。

<?xml version=”1.0″?>

<mx:Application xmlns:mx=”http://www.macromedia.com/2003/mxml”

 xmlns:yahoo=”com.yahoo.maps.api.flex.*”

 xmlns:local=”*”

 xmlns=”*” >

 <yahoo:YahooMap id=”myMap” width=”550″ height=”400″

   zoomLevel=”3″ latitude=”37.77159″ longitude=”-122.401714″ />

</mx:Application>

Flex中使用As在Yahoo! Map添加标识

可以使用 Map.addMarkerByAddress()或Map.addMarkerByLatLon() 在Yahoo! Maps中添加一个标识，Map.addMarkerByAddress()是在特定的地址添加标识，而Map.addMarkerByLatLon() 则是在特定的位置添加标识，这两个方法都需要3个参数，第一个参数是，要添加的标识类型，注意这里传参的是类的名称，而不是类的实例；第二个参数是要添加特定标识在地图上的地址或者位置（LatLon (纬度, 经度)信息，最后一个您必须创建一个类用来初始化标识实例,您可以添加 POI (Point Of Interest，兴趣点) 标识, 路标(waypoint)标识,自定义图像标识( custom image markers), 或者自定义SWF标识。POI标识是一种特定类型的标识，当您点击POI标识时，该标识会展开并显示关于特定位置的进一步信息。路标（waypoint）标识是一种根据其在地图中的位置自动索引的简单标识–您可以使用As教本象使用数组一样的遍历地图上的路标标识。使用自定义图像标识可以在地图上添加与特定位置对应的自定义图像，目前只支持SWF文件或者非渐变(non-progressive)JPG图片。而如果您想要给标识添加更加复杂的交互功能，那么您就需要使用自定义SWF标识，自定义SWF标识，可以在地图上添加实现特定接口的SWF文件。

以下代码，我们将在我们的地图上添加一个POI标识，注意ActionScript代码放置在MXML文件的CDATA块中:

<?xml version=”1.0″?>

<mx:Application

 xmlns:mx=”http://www.macromedia.com/2003/mxml”

 xmlns:yahoo=”com.yahoo.maps.api.flex.*”

 xmlns:local=”*”

 xmlns=”*” >

 <mx:Script>

 <![CDATA[

   import com.yahoo.maps.markers.CustomPOIMarker;

   function onInitialize(eventObject) {

      var markerArgs = {

        index:"M",

        title:"Macromedia Inc.",

        description:"Macromedia Headquarters",

        markerColor:0xCCCCCC,

        strokeColor:0xDFDFDF

      };

      myMap.addMarkerByAddress(CustomPOIMarker, "601 Townsend St, San Francisco, CA 94103", markerArgs);

   }

 ]]>

 </mx:Script>

 <yahoo:YahooMap id=”myMap” width=”550″ height=”400″

   zoomLevel=”3″ latitude=”37.77159″ longitude=”-122.401714″

   initialize=”onInitialize(event);” />

</mx:Application>

运行以上示例

使Yahoo! Map可拖动

使用Map.addTool(tool, isActive)方法可以为地图添加相应的工具，目前可以添加的就只有一个支持鼠标拖动地图的PanTool，Yahoo! Maps中有一个鼠标交互工具根类Tool,PanTool就是继承该类而来的，如果您需要其他的工具，也可以通过继承Tool类，实现您自己的工具类。

这里我们将为地图添加一个PanlTool，以便可以使用鼠标拖动来移动地图，显示不同的部分：

<?xml version=”1.0″?>

<mx:Application

 xmlns:mx=”http://www.macromedia.com/2003/mxml”

 xmlns:yahoo=”com.yahoo.maps.api.flex.*”

 xmlns:local=”*”

 xmlns=”*” >

 <mx:Script>
 <![CDATA[

   import com.yahoo.maps.tools.PanTool;

   function onInitialize(eventObject) {

     myMap.addTool(new PanTool(), true);

   }

 ]]>

 </mx:Script>

 <yahoo:YahooMap id=”myMap” width=”550″ height=”400″

   zoomLevel=”3″ latitude=”37.77159″ longitude=”-122.401714″

   initialize=”onInitialize(event);” />

</mx:Application>

运行以上示例

为Yahoo! Maps添加覆盖层(Overlay)

覆盖层（Overlays）是显示在地图上的一系列数据点的集合。您可以定义您自己的覆盖层或者使用Yahoo! Maps预定义覆盖层类。其中有一个非常强大的而有用的预定义类：LocalSearchOverlay，该类可以让开发人员方便的根据地图区域定义自动显示文本搜索的结果。您还可以为您的地图添加CustomSWFOverlay、GeoRSSOverlay和Traffic Overlay覆盖层。为了使用LocalSearchOverlay，首先要创建一个新的LocalSearchOverlay对象，再使用该类的 search方法搜索特定的文本字符串。然后使用Map.addOverlay(overlay)方法将搜索结果显示在地图上。

<?xml version=”1.0″?>

<mx:Application

 xmlns:mx=”http://www.macromedia.com/2003/mxml”

 xmlns:yahoo=”com.yahoo.maps.api.flex.*”

 xmlns:local=”*”

 xmlns=”*” >

 <mx:Script>

 <![CDATA[

 import com.yahoo.maps.overlays.LocalSearchOverlay;

 function onInitialize(eventObject) {

     var localSearch = new LocalSearchOverlay();

     myMap.addOverlay(localSearch);

     localSearch.search('sushi', myMap.getCenter(), 1, 10);

 };

 ]]>

 </mx:Script>

 <yahoo:YahooMap id=”myMap” width=”100%” height=”100%”

   zoomLevel=”3″ latitude=”37.77159″ longitude=”-122.401714″

   initialize=”onInitialize(event);” />

</mx:Application>

运行以上示例

给Yahoo! Map增加工具元件(Widgets and Tools)

您可以非常容易的在您的地图上增加工具元件来帮助用户浏览地图或者进行其他操作。您可以添加的工具元件有：自定义SWF工具（custom SWF tools）、导航元件（NavigatorWidget）和工具栏元件（ToolBarWidget）。以下代码中我们将为我们的地图添加一个导航元件：

<mx:Application

 xmlns:mx=”http://www.macromedia.com/2003/mxml”

 xmlns:yahoo=”com.yahoo.maps.api.flex.*”

 xmlns:local=”*”

 xmlns=”*” >

 <mx:Script>

 <![CDATA[

 import com.yahoo.maps.widgets.NavigatorWidget;

 function onInitialize(eventObject) {

   myMap.addWidget(new NavigatorWidget());

 }

 ]]>

 </mx:Script>

 <yahoo:YahooMap id=”myMap” width=”550″ height=”400″

   zoomLevel=”3″ latitude=”37.77159″ longitude=”-122.401714″

   initialize=”onInitialize(event);” />

</mx:Application>

运行以上示例

Yahoo! Maps的其他特性

以上只是很表层的介绍了Yahoo! Maps的Flex API的使用，Yahoo! Maps提供了丰富的API来满足您基于Yahoo! Maps应用的需求,例如：

• 您地图上的所有覆盖层、工具、元件都可以使用hide()和show()方法响应用户事件如鼠标移过和鼠标点击等。


• 通过使用TrafficOverlay类很容易的创建交通流量图（traffic flow maps）。


• 使用CustomSWFTool类，用自定义的Flash SWF 工具装扮您的地图，或者使用CustomSWFMarker类为您的地图添加富有创意的SWF标识。


• 使用ToolBarWidget类显示一个当前您的地图可用工具的菜单。运行示例|查看代码
• 使用PanTool类，打开或关闭地图的拖动。


• 使用Map.setBounds()和Map.setZoomLevel()方法动态改变您的地图的缩放等级或地图边界范围。

更多Yahoo! Maps Flex API信息请查看Flash APIs参考手册。

以上文章大部分翻译自：Yahoo! Maps Flex API - Getting Started Guide，该翻译未得到官方授权，如果有不妥，请通知我撤除该文。