Flex中如何使用Google　Maps的例子--破碎虚空

Flex中如何使用Google Maps的例子

[ 2008-8-20 15:38:00 | By: 梦境天元 ]

和前面Flex中如何使用Yahoo! Maps的例子类似的，接下来的例子演示了Flex/ActionScript项目中如何使用Google Maps。

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

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

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

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

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

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.services.GeocodingResponse;
import com.google.maps.services.Placemark;
import mx.controls.Alert;
import mx.events.ResizeEvent;
private var googleMap:Map;
private var geocoder:ClientGeocoder;
private function init():void {
googleMap = new Map();
googleMap.key = APP_ID;
googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);
googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
googleMap.addControl(new ZoomControl());
googleMap.addControl(new MapTypeControl());
mapContainer.addChild(googleMap);
}
private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {
var result:Placemark = GeocodingResponse(evt.response).placemarks[0];
googleMap.setCenter(result.point, 13);
}
private function geocoder_geocodingFailure(evt:GeocodingEvent):void {
Alert.show("Unable to geocode address: " + evt.name);
}
private function googleMap_mapReady(evt:MapEvent):void {
geocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);
geocoder.geocode(textInput.text);
}
private function button_click(evt:MouseEvent):void {
geocoder.geocode(textInput.text);
}
private function mapContainer_resize(evt:ResizeEvent):void {
if (googleMap) {
googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
}
}
]]>
</mx:Script>
<mx:String id="APP_ID" source="appid.txt" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="Address:"
direction="horizontal">
<mx:TextInput id="textInput"
text="601 Townsend St, San Francisco, CA 94103" />
<mx:Button id="button"
label="Submit"
click="button_click(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:UIComponent id="mapContainer"
width="100%"
height="100%"
resize="mapContainer_resize(event);" />
</mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子

阅读全文 | 回复(0) | 引用通告 | 编辑

上一篇：Web 3.0带来新体验个性化聚合服务是关键
下一篇：ASP.NET缓存:方法分析和实践示例

发表评论：