2010-07-16

Google Map API(flash版)路线搜索

google map driving direction

google map driving direction

根据来访者的ip判断其地址,并将地图中心至于此位置。
根据输入的始点和终点,搜索行车路线或者行走路线(google map api没有提供公车路线接口),由google map 服务器返回具体的步骤和距离。
google map提供了很多好用接口,赞一个。
code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" xmlns:maps="com.google.maps.*">
	<mx:Panel title="Driving Direction" width="100%" height="100%">
		<mx:HDividedBox width="100%" height="100%">
			<mx:VBox width="35%" height="100%">
				<mx:HBox>
				    <mx:Label text="始点: " width="70"/>
				    <mx:TextInput id="from" text="重庆, 中国" width="100%"/>
				</mx:HBox>
				<mx:HBox>
					<mx:Label text="终点: " width="70"/>
					<mx:TextInput id="to" text="杭州, 中国" width="100%"/>
				</mx:HBox>
				<mx:HBox>
					<mx:Label text="方式: " width="70"/>
					<mx:ComboBox id="mode" dataProvider="{MODES}"/>
				</mx:HBox>
				<mx:Button id="subminButton" label="确定" click="processForm(event);"/>
				<mx:HRule width="100%" strokeColor="0xc4cccc" shadowColor="0xeeeeee" strokeWidth="2"/>
				<mx:Text id="directionsSummary" width="100%"/>
				<mx:DataGrid id="directionsGrid" dataProvider="{dirSteps}" width="100%" height="100%" sortableColumns="false" itemClick="processGridClick(event)">
					<mx:columns>
						<mx:Array>
							<mx:DataGridColumn dataField="步骤" width="40"/>
							<mx:DataGridColumn dataField="描述">
								<mx:itemRenderer>
									<mx:Component>
										<mx:Text width="100%" htmlText="{data.Description}"/>
									</mx:Component>
								</mx:itemRenderer>
							</mx:DataGridColumn>
							<mx:DataGridColumn dataField="距离" width="120">
								<mx:itemRenderer>
									<mx:Component>
										<mx:Text width="100%" htmlText="{data.Distance}"/>
									</mx:Component>
								</mx:itemRenderer>
							</mx:DataGridColumn>
						</mx:Array>
					</mx:columns>
				</mx:DataGrid>
				<mx:Text id="directionsCopyright" width="100%"/>
			</mx:VBox>
			<maps:Map id="map" language="zh_cn" key="ABQIAAAAjIKvjJz9e4s0_ALexGzzYBRiZPxUSbLQTlpqKkREDDo2fZu0zxQzOJGyNBk0Gh3HAwK3Eat_44bPgA" mapevent_mapready="onMapReady(event)" width="65%" height="100%"/>
		</mx:HDividedBox>
	</mx:Panel>
	<mx:WebService id="ip" result="ipResult(event)" fault="ipFault(event)" wsdl="http://webservice.webxml.com.cn/WebServices/IpAddressSearchWebService.asmx?wsdl"/>
	<mx:Script>
		<![CDATA[
		import com.google.maps.interfaces.IPolyline;
		import com.google.maps.Map;
		import com.google.maps.MapEvent;
		import com.google.maps.MapType;
       	import com.google.maps.InfoWindowOptions;
		import com.google.maps.LatLng;
       	import com.google.maps.LatLngBounds;
		import com.google.maps.overlays.Marker;
		import com.google.maps.overlays.MarkerOptions;
		import com.google.maps.controls.ControlPosition;
		import com.google.maps.controls.MapTypeControl;
		import com.google.maps.services.*;
		import com.google.maps.MapAction;
 
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
		import mx.controls.Alert;
		import mx.collections.ArrayCollection;
 
		private var dir:Directions;
		//Bindable是用来绑定,使程序组件之间的数据同步,如果没有会提示Warning
		[Bindable] private var MODES:Array = [
		    {label: "驾车", data: DirectionsOptions.TRAVEL_MODE_DRIVING},
		    {label: "行走", data: DirectionsOptions.TRAVEL_MODE_WALKING}];
 
		[Bindable] public var dirSteps:ArrayCollection=new ArrayCollection();
 
		private function onMapReady(event:Event):void
		{
			this.map.setDoubleClickMode(MapAction.ACTION_NOTHING);
			this.map.enableScrollWheelZoom();
			map.setCenter(new LatLng(32, 108), 5, MapType.NORMAL_MAP_TYPE);
			getVisitorPosition();
			setupDirections();
		}
 
		private var geocoder:ClientGeocoder;
		private function getVisitorPosition():void
		{
			geocoder = new ClientGeocoder();
			geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,function(event:GeocodingEvent):void
			{
				var placemarks:Array = event.response.placemarks;
				if(placemarks.length > 0)
				{
					//将地图中心移至来访者地址
					map.setCenter(placemarks[0].point, 6, MapType.NORMAL_MAP_TYPE);
				}
			});
			geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,function(event:GeocodingEvent):void
			{
				Alert.show("获取地址失败");
			});
			//获取Ip和地址
			ip.getGeoIPContext();
		}
 
		private function setupDirections():void
		{
			dir=new Directions();
			dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirLoad);
			dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE,onDirFail);
		}
 
		private function processForm(event:Event):void
		{
			var opts:DirectionsOptions = new DirectionsOptions({language: "zh", travelMode: mode.selectedItem.data});
			trace(opts);
			dir.setOptions(opts);
			dir.load("from: " + from.text + " to: " + to.text);
		}
 
		private function ipResult(event:ResultEvent):void
		{
			//event.result数组中第一个为Ip值,第二个为城市
			geocoder.geocode(event.result[1]);
		}
 
		private function ipFault(event:FaultEvent):void
		{
			Alert.show("获取位置失败");
		}
 
		private function onDirLoad(e:DirectionsEvent):void
		{
			var dir:Directions = e.directions;
			//清理之前的数据
			dirSteps.removeAll();
			map.clearOverlays();
 
			//创建路线图并添加到map中
			var directionsPolyline:IPolyline = dir.createPolyline();
			map.addOverlay(directionsPolyline);
			//根据路线图将地图缩放到适当大小
			var directionsBounds:LatLngBounds=directionsPolyline.getLatLngBounds();
			map.setCenter(directionsBounds.getCenter());
			map.setZoom(map.getBoundsZoomLevel(directionsBounds));
 
			directionsCopyright.htmlText = dir.copyrightsHtml;
			directionsSummary.htmlText = dir.summaryHtml;
 
			var numRoutes:Number = dir.numRoutes;
			//dir.getRoute(i).getStep(j).latLng 获取第i条路线中第j步的坐标
			var startLatLng:LatLng = dir.getRoute(0).getStep(0).latLng;
			var endLatLng:LatLng = dir.getRoute(numRoutes-1).endLatLng;
			map.addOverlay(new Marker(startLatLng));
			map.addOverlay(new Marker(endLatLng));
 
			for (var r:int = 0; r < numRoutes; r++)
			{
				var route:Route = dir.getRoute(r);
				//其他路线终点标记
				if (r >= 0 || r < (numRoutes - 1))
				{
					var midMarker:Marker = new Marker(route.endLatLng, new MarkerOptions({label:r+1, labelFormat:{bold:true}}));
					map.addOverlay(midMarker);
				}
 
				var numSteps:uint = route.numSteps;
				for (var s:int = 0; s < numSteps; s++)
				{
					var step:Step = route.getStep(s);
					dirSteps.addItem({步骤: (s+1), Description: step.descriptionHtml, Distance: step.distanceHtml, LatLng: step.latLng});
				}
			}
 
			dirSteps.refresh();
		}
 
		private function onDirFail(e:DirectionsEvent):void
		{
			Alert.show("错误:" + e.directions.status);
		}
 
		//点击grid中的项目,在map中显示相应的信息
		private function processGridClick(event:Event):void
		{
			var latLng:LatLng = directionsGrid.selectedItem.LatLng;
			var opts:InfoWindowOptions = new InfoWindowOptions();
			opts.contentHTML = directionsGrid.selectedItem.Description;
			map.openInfoWindow(latLng, opts);
		}
		]]>
	</mx:Script>
</mx:Application>

3 条评论

  • 貌似贵站最近经常无法访问?

  • 天气热啦,虽然上网,但是也要注意身体呀

说点啥吧