在Flex中使用GoogleMap
在Flex中使用GoogleMap,可以让自己的网站有地图功能,够吸引人。HelloWorld程序网上有很多,这里推荐一个mm写滴(http://liuyanttkl.iteye.com/blog/196103 ),步骤介绍得很详细,也提拱了sdk的下载。赞一个!!
去翻了一下其中的文档,想利用它做个火炬传递的Demo,这样一站接一站的在地图上动画展示,一定不错,不过现在还没实现。哈 。
将上面链接里的程序稍微改进一点,加上一点Control,用于导航,google提拱的Control全放在 com.google.maps.controls包里面,有地点控制,大小控制,地图类型控制,以及OverView控制。把它们都加到地图里面去。改 写她的onMapReady()方法,加上四个addControl()即可。代码如下:
- <? xml version = "1.0" encoding = "utf-8" ?>
- < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" width = "100%" height = "100%" >
- < mx:UIComponent id = "mapContainer"
- initialize = "startMap(event);"
- resize = "resizeMap(event)"
- width = "100%" height = "100%" />
- < mx:Script >
- <![CDATA[
- import com.google.maps.controls.MapTypeControlOptions;
- import com.google.maps.controls.MapTypeControl;
- import com.google.maps.controls.ZoomControlOptions;
- import com.google.maps.controls.ZoomControl;
- import com.google.maps.controls.OverviewMapControlOptions;
- import com.google.maps.controls.OverviewMapControl;
- import com.google.maps.controls.PositionControlOptions;
- import com.google.maps.controls.PositionControl;
- import flash.events.Event;
- import com.google.maps.MapEvent;
- import com.google.maps.Map;
- import com.google.maps.MapType;
- import com.google.maps.LatLng;
- private var map:Map;
- public function startMap(event:Event):void {
- map = new Map();
- map.addEventListener(MapEvent.MAP_READY, onMapReady);
- mapContainer.addChild(map);
- map.key="ABQIAAAAIhwqRCxr2Hd_iUrIB7KzdxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR4G7tD76snbpNjQ3DrJkhKe_noZg";
- }
- public function resizeMap(event:Event):void {
- map.setSize(new Point(mapContainer.width, mapContainer.height));
- }
- private function onMapReady(event:MapEvent):void {
- map.setCenter(new LatLng(39.92,116.46)/*北京的经纬度*/, 14, MapType.SATELLITE_MAP_TYPE/*卫星图模式*/);
- //加上一些Control
- map.addControl( new PositionControl( new PositionControlOptions() ) );
- map.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) );
- map.addControl( new ZoomControl( new ZoomControlOptions() ) );
- map.addControl( new MapTypeControl( new MapTypeControlOptions() ) );
- }
- ]]>
- </ mx:Script >
- </ mx:Application >
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"> <mx:UIComponent id="mapContainer" initialize="startMap(event);" resize="resizeMap(event)" width="100%" height="100%"/> <mx:Script> <![CDATA[ import com.google.maps.controls.MapTypeControlOptions; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.ZoomControlOptions; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.OverviewMapControlOptions; import com.google.maps.controls.OverviewMapControl; import com.google.maps.controls.PositionControlOptions; import com.google.maps.controls.PositionControl; import flash.events.Event; import com.google.maps.MapEvent; import com.google.maps.Map; import com.google.maps.MapType; import com.google.maps.LatLng; private var map:Map; public function startMap(event:Event):void { map = new Map(); map.addEventListener(MapEvent.MAP_READY, onMapReady); mapContainer.addChild(map); map.key="ABQIAAAAIhwqRCxr2Hd_iUrIB7KzdxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR4G7tD76snbpNjQ3DrJkhKe_noZg"; } public function resizeMap(event:Event):void { map.setSize(new Point(mapContainer.width, mapContainer.height)); } private function onMapReady(event:MapEvent):void { map.setCenter(new LatLng(39.92,116.46)/*北京的经纬度*/, 14, MapType.SATELLITE_MAP_TYPE/*卫星图模式*/); //加上一些Control map.addControl( new PositionControl( new PositionControlOptions() ) ); map.addControl( new OverviewMapControl( new OverviewMapControlOptions() ) ); map.addControl( new ZoomControl( new ZoomControlOptions() ) ); map.addControl( new MapTypeControl( new MapTypeControlOptions() ) ); } ]]> </mx:Script> </mx:Application>
这样地图就有了导航功能了:
里面有一些"DEBUG MODE ",这里因为直接在本地运行的缘故。将flex放到tomcat里去,它就不会出现了。不过这个"DEBUG MODE "不会碍什么事的,也不讨厌。