Yahoo! Maps Beta推出已经有一段时间了，前面我们在Flex1.5:品尝Yahoo! Maps的甜饼中有详细的介绍和Flex1.5中使用Yahoo! Maps的方法，正如我们在“甜饼”一文中提到的，Yahoo! Maps目前只提供Flex1.5的API组件，该组件在Flex2中并不能使用，这不得不说是很大的遗憾，那么是不是有其他的办法可以在Flex2中使用Yahoo! Maps呢？！

Yahoo! Maps Beta推出已经有一段时间了，前面我们在Flex1.5:品尝Yahoo! Maps的甜饼中有详细的介绍和Flex1.5中使用Yahoo! Maps的方法，正如我们在“甜饼”一文中提到的，Yahoo! Maps目前只提供Flex1.5的API组件，该组件在Flex2中并不能使用，这不得不说是很大的遗憾，那么是不是有其他的办法可以在Flex2中使用Yahoo! Maps呢？！

YES，回答是肯定的！

Yahoo!Maps近期推出了面向移动应用或者离线应用的Yahoo! Maps Web Services - Map Image API，直接使用Map Image API,可以通过URL根据经纬度或地址信息直接获取到特定区域地图的图像文件，目前支持PNG和GIF两种图像，另外还支持不通缩放比例的图像。

该Web Services地址如下：

http://api.local.yahoo.com/MapsService/V1/mapImage

参数列表如下：

  • appid，string (required)：我们向Yahoo申请的基于Yahoo!Maps的Application ID，具体信息查看这里
  • street city state zip location：相应的地理位置信息，如街道、城市、州、邮政编码或者混合的方位信息
  • latitude，float: -90 - 90，起始位置纬度
  • longitude，float: -180 to 180,起始位置经度，注意，如果同时设置了经纬度，那么这两个参数的优先级最高，即使我们同样设置了location等信息，Yahoo!Maps会直接根据该经纬度来获取地图。
  • image_type，png (缺省) 或者gif，返回图像的类型
  • image_width image_height，integer: 10 to 2000 (default: 620×500)：返回图像的大小。
  • zoom，integer: 1 to 12 (default: 6)：地图缩放级别，约大地图比例尺越大。
  • radius ，float ，地图显示的区域大小，单位m。

最终请求URL类似如下：

http://api.local.yahoo.com/MapsService/V1/mapImage?appid=YahooDemo&street=701+First+Avenue&city=Sunnyvale&state=CA

该请求参数没有问题的话会返回如下XML数据：

<?xml version="1.0" encoding="UTF-8"?>
<Result xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
http://img.maps.yahoo.com/mapimage?MAPDATA=eJz6K.d6wXVM6myr2yRPfx6.kl.uMGgD3Tu4JtDQzr_33pFEsTTSaosZ9OCtsiDrsLv9t65fzjz0CJm6JO2v_ZIHLflY9gto.xWMK9ovlRJVmrBLO4FoSsh3Ipsr
</Result>

其中：

http://img.maps.yahoo.com/mapimage?MAPDATA=eJz6K.d6wXVM6myr2yRPfx6.kl.uMGgD3Tu4JtDQzr_33pFEsTTSaosZ9OCtsiDrsLv9t65fzjz0CJm6JO2v_ZIHLflY9gto.xWMK9ovlRJVmrBLO4FoSsh3Ipsr

就是我们实际获取地图图像的地址。

如果请求URL参数不符合规范，会返回相应的错误信息：

<Error>
 The following errors were detected:
 <Message>invalid value: zoom</Message>
</Error>

OK，有了上面的API，我们就可以在Flex2中直接获取地图图片，然后显示出来就可以了，虽然没有在Flex1.5中那么完美，但是能吃吃烧饼这样也不错哦！

我们实现的思路如下：

  1. 首先，根据经纬度，通过HTTPService，获取实际图像文件的地址。
  2. 然后，使用Image组件将图片导入。

首先，我们构造一个HTTPService访问Yahoo!Map Image Api：

<mx:HTTPService id="imgURLGetter"
  result="responseGetter(event)"
  url="http://api.local.yahoo.com/MapsService/V1/mapImage"
  fault="doFault(event)"
  showBusyCursor="true">

  <mx:request>
    <appid>
      yahoomap.flex2.eshangrao.com
    </appid>
    <latitude>
      {latitude}
    </latitude>
    <longitude>
      {longitude}
    </longitude>
    <zoom>
      {zoom_value}
    </zoom>
    <image_height>
      460
    </image_height>
    <image_width>
      730
    </image_width>
  </mx:request>
</mx:HTTPService>

然后，在HTTPService返回时，获取相应的图像地址，使用Image组件将其导入：

private function responseGetter(event:ResultEvent):Void
{
  setStatus2('Load map...');
  view_img2.source=String(event.result.Result);
}

这样，我们就可以在Flex2的应用中使用Yahoo!Maps了，在以上的基础上我做了个比较完整的示例：

主要功能如下：

  • 支持使用经纬度获取地图
  • 支持直接使用地址获取地图
  • 支持地图缩放
  • 可以直接使用距离（km)和方位移动地图
  • 支持鼠标拖放直接移动地图。

需注意的问题：

  • 导入图像的速度有点慢，Yahoo!Maps官方使用了缓存的技术，并且图片都是分割成多个导入的，目前我们的示例中没有分割，等有时间，我会优化成分割导入图像的。
  • 为了导入新的地图的时候，右边地图窗口空白，我使用了两个Image组件来导入图片，一个后台导入图片，一个负责显示，两个组件交替使用。
  • 为了编码方便，根据地址获取地图，我是先使用Yahoo!的地理API服务先获取相应地址的经纬度，然后再使用经纬度获取地图。
  • 不同缩放比例的情况下，比例尺的大小，是比对Yahoo!Maps官方实现的效果得出的，可能存在不准确的地方。

操作指南：

  • 输入地址，点击go按钮，获取地图
  • 输入经纬度，点击load Maps，获取地图
  • 点击ZoomIn/ZoomOut，缩放地图，也可以直接在Zoom输入框中输入1-12任意数字后，点击load Maps,获取地图
  • 输入距离，方位后，点击move to ，移动地图
  • 也可直接使用鼠标拖动地图，来移动地图

查看示例|下载源代码|更多内容