Flex中如何使用Yahoo! Maps的例子

By Minidxer | August 5, 2008

接下来的例子演示了Flex中如何使用Yahoo! Maps创建自己的地图应用。


首先你需要做的是从这里获取Yahoo! Maps API key

然后从这里下载Yahoo! Maps ActionScript 3.0 component

接下去将zip压缩包内的东西复制到工程的/libs/中就可以了。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.ResizeEvent;
  11.             import mx.controls.Alert;
  12.  
  13.             import com.yahoo.maps.api.YahooMap;
  14.             import com.yahoo.maps.api.YahooMapEvent;
  15.             import com.yahoo.maps.api.core.location.Address;
  16.             import com.yahoo.maps.webservices.geocoder.GeocoderResult;
  17.             import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;
  18.  
  19.             private var yahooMap:YahooMap;
  20.             private var address:Address;
  21.  
  22.             private function init():void {
  23.                 yahooMap = new YahooMap();
  24.                 yahooMap.init(APP_ID, mapContainer.width, mapContainer.height);
  25.                 yahooMap.addPanControl();
  26.                 yahooMap.addZoomWidget();
  27.                 yahooMap.addTypeWidget();
  28.                 mapContainer.addChild(yahooMap);
  29.  
  30.                 geocodeAddress(textInput.text);
  31.             }
  32.  
  33.             private function geocodeAddress(value:String):void {
  34.                 address = new Address(value);
  35.                 address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, address_geocoderSuccess);
  36.                 address.addEventListener(GeocoderEvent.GEOCODER_FAILURE, address_geocoderFailure);
  37.                 address.geocode();
  38.             }
  39.  
  40.             private function address_geocoderSuccess(evt:GeocoderEvent):void {
  41.                 var result:GeocoderResult = Address(evt.target).geocoderResultSet.firstResult;
  42.                 yahooMap.centerLatLon = result.latlon;
  43.                 yahooMap.zoomLevel = result.zoomLevel;
  44.             }
  45.  
  46.             private function address_geocoderFailure(evt:GeocoderEvent):void {
  47.                 Alert.show("Unable to geocode address: " + address.address);
  48.             }
  49.  
  50.             private function mapContainer_resize(evt:ResizeEvent):void {
  51.                 if (yahooMap) {
  52.                     yahooMap.setSize(mapContainer.width, mapContainer.height);
  53.                 }
  54.             }
  55.  
  56.             private function button_click(evt:MouseEvent):void {
  57.                 geocodeAddress(textInput.text);
  58.             }
  59.         ]]>
  60.     </mx:Script>
  61.  
  62.     <mx:String id="APP_ID" source="appid.txt" />
  63.  
  64.     <mx:ApplicationControlBar dock="true">
  65.         <mx:Form styleName="plain">
  66.             <mx:FormItem label="Address:"
  67.                     direction="horizontal">
  68.                 <mx:TextInput id="textInput"
  69.                         text="601 Townsend St, San Francisco, CA 94103" />
  70.                 <mx:Button id="button"
  71.                         label="Submit"
  72.                         click="button_click(event);" />
  73.             </mx:FormItem>
  74.         </mx:Form>
  75.     </mx:ApplicationControlBar>
  76.  
  77.     <mx:UIComponent id="mapContainer"
  78.             width="100%"
  79.             height="100%"
  80.             resize="mapContainer_resize(event);"/>
  81.  
  82. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | 1 Comment » | 147 views Tags: , , ,

Related Post

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll