Flex中如何使用Google Maps的例子

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

然后从这里下载Google Maps ActionScript 3.0 component

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

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

src="http://blog.minidx.com/ext02/using-google-maps-in-a-flex-project/main.html" width="490" height="330">

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

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 com.google.maps.LatLng;
11.             import com.google.maps.Map;
12.             import com.google.maps.MapEvent;
13.             import com.google.maps.controls.MapTypeControl;
14.             import com.google.maps.controls.PositionControl;
15.             import com.google.maps.controls.ZoomControl;
16.             import com.google.maps.services.ClientGeocoder;
17.             import com.google.maps.services.GeocodingEvent;
18.             import com.google.maps.services.GeocodingResponse;
19.             import com.google.maps.services.Placemark;
20.             import mx.controls.Alert;
21.             import mx.events.ResizeEvent;
22.  
23.             private var googleMap:Map;
24.             private var geocoder:ClientGeocoder;
25.  
26.             private function init():void {
27.                 googleMap = new Map();
28.                 googleMap.key = APP_ID;
29.                 googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);
30.                 googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
31.                 googleMap.addControl(new ZoomControl());
32.                 googleMap.addControl(new MapTypeControl());
33.  
34.                 mapContainer.addChild(googleMap);
35.             }
36.  
37.             private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {
38.                 var result:Placemark = GeocodingResponse(evt.response).placemarks[0];
39.                 googleMap.setCenter(result.point, 13);
40.             }
41.  
42.             private function geocoder_geocodingFailure(evt:GeocodingEvent):void {
43.                 Alert.show("Unable to geocode address: " + evt.name);
44.             }
45.  
46.             private function googleMap_mapReady(evt:MapEvent):void {
47.                 geocoder = new ClientGeocoder();
48.                 geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);
49.                 geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);
50.                 geocoder.geocode(textInput.text);
51.             }
52.  
53.             private function button_click(evt:MouseEvent):void {
54.                 geocoder.geocode(textInput.text);
55.             }
56.  
57.             private function mapContainer_resize(evt:ResizeEvent):void {
58.                 if (googleMap) {
59.                     googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
60.                 }
61.             }
62.         ]]>
63.     </mx:Script>
64.  
65.     <mx:String id="APP_ID" source="appid.txt" />
66.  
67.     <mx:ApplicationControlBar dock="true">
68.         <mx:Form styleName="plain">
69.             <mx:FormItem label="Address:"
70.                     direction="horizontal">
71.                 <mx:TextInput id="textInput"
72.                         text="601 Townsend St, San Francisco, CA 94103" />
73.                 <mx:Button id="button"
74.                         label="Submit"
75.                         click="button_click(event);" />
76.             </mx:FormItem>
77.         </mx:Form>
78.     </mx:ApplicationControlBar>
79.  
80.     <mx:UIComponent id="mapContainer"
81.             width="100%"
82.             height="100%"
83.             resize="mapContainer_resize(event);" />
84.  
85. </mx:Application>