Water and Bread: [練習] Google Map API

最近在看Google Map API，寫個簡單範例練習，點選新增可增加Marker至正中心，Marker可拖曳，點擊列表可移動地圖到指定Marker
程式原始碼
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        xmlns:maps="com.google.maps.*"
        creationComplete="main();"
        width="900"     height="500" 
        enabled="false"
        backgroundColor="0xFFFFFF" >
        <mx:Script>
                <![CDATA[
                        import mx.controls.dataGridClasses.DataGridColumn;
                        import mx.effects.Glow;
                        import mx.events.ListEvent;
                        import mx.controls.Alert;
                        import mx.rpc.events.FaultEvent;
                        import mx.managers.FocusManager;
                        import mx.events.FlexEvent;
                        import mx.rpc.events.ResultEvent;
                        import mx.collections.ArrayCollection;
                        import mx.controls.ColorPicker;
                        import mx.controls.Button;
                        import com.google.maps.overlays.MarkerOptions;
                        import com.google.maps.overlays.Marker;
                        import com.google.maps.controls.OverviewMapControl;
                        import com.google.maps.controls.ScaleControl;
                        import com.google.maps.controls.MapTypeControl;
                        import com.google.maps.controls.PositionControl;
                        import com.google.maps.controls.ZoomControl;
                        import com.google.maps.MapType;
                        import com.google.maps.LatLng;
                        import com.google.maps.MapOptions;
                        import com.google.maps.MapEvent;
                        
                        [Bindable]
                        private var currentLatlng:LatLng;
                        
                        [Bindable]
                        private var currentMarkers:ArrayCollection = new ArrayCollection([]);
                        
                        private static const TAIWAN_LATLNG:LatLng = new LatLng(23.793120080412926, 121.12177848815918);
                        private static const DEFAULT_TOOLTIP_MESSAGE:String = "請輸入提示名稱";
                        
                        private var iconArr:Array = [];
                        
                        private function main():void
                        {
                                cursorManager.setBusyCursor();
                                toolTipMsg.text = DEFAULT_TOOLTIP_MESSAGE;
                        }
                        
                        /**
                         * map生成完畢，加入控制項
                         */
                        private function mapReadyhandler(event:MapEvent):void
                        {
                                var map:Map = Map(event.currentTarget);
                                
                                //取消地形模式，mapTypeControl不會顯示
                                myMap.removeMapType(MapType.PHYSICAL_MAP_TYPE);
                                
                                map.addControl(new ZoomControl());
                                map.addControl(new PositionControl());
                                map.addControl(new MapTypeControl());
                                map.addControl(new ScaleControl());
                                map.addControl(new OverviewMapControl());
                                
                                myMap.addEventListener(MouseEvent.MOUSE_UP, function():void{updatePos();});
                                
                                updatePos();
                                this.enabled = true;
                                cursorManager.removeBusyCursor();
                        }
                        
                        /**
                         * map生成時設定初值
                         */
                        private function mapPreInitHandler(event:MapEvent):void
                        {
                                var mapOption:MapOptions = new MapOptions();
                                mapOption.zoom = 8;
                                mapOption.center = TAIWAN_LATLNG;
                                mapOption.mapType = MapType.NORMAL_MAP_TYPE;
                                
                                myMap.setInitOptions(mapOption);
                        }
                        
                        private function updatePos():void
                        {
                                currentLatlng = myMap.getCenter();
                        }
                        
                        private function addMarkerHandler(event:MouseEvent):void
                        {
                                var markerOptions:MarkerOptions = new MarkerOptions();
                                var iconClass:Class = house2;
                                var icon:DisplayObject = new iconClass();
                                
                                icon.scaleX = icon.scaleY = .5;
                                
                                markerOptions.icon = icon;
                                markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER;
                                markerOptions.iconOffset = new Point(icon.width * .5, -icon.height * .5);
                                markerOptions.tooltip = toolTipMsg.text;
                                markerOptions.hasShadow = true;
                                markerOptions.draggable = true;
                                
                                var marker:Marker = new Marker(currentLatlng, markerOptions);
                                myMap.addOverlay(marker);
                                
                                currentMarkers.addItem({tooltip:toolTipMsg.text, marker:marker});
                        }
                        
                        private function removeMarkerHandler(event:MouseEvent):void
                        {
                                var selectedItem:Object = markerList.selectedItem;
                                myMap.removeOverlay(selectedItem.marker);
                                
                                currentMarkers.removeItemAt(currentMarkers.getItemIndex(selectedItem));
                        }
                        
                        private function markerListClickHandler(event:ListEvent):void
                        {
                                var obj:Object = markerList.selectedItem;
                                var marker:Marker = obj.marker as Marker;
                                
                                myMap.panTo(marker.getLatLng());
                        }
                        
                ]]>
        </mx:Script>
        <mx:Style source="assets/css/style.css"/>
                
                <mx:Label id="titleLbl"
                        styleName="titleStyle"
                        x="10" y="10" 
                        text="Flex Google Map" 
                        filters="{[new DropShadowFilter(0)]}"/>
                <mx:HRule x="0" y="47" width="100%"/>
                
                <mx:DataGrid id="markerList"
                        dataProvider="{currentMarkers}"
                        itemClick="markerListClickHandler(event)"
                        x="10" y="151" width="271" height="334"
                        fontSize="12">
                        <mx:columns>
                                <mx:DataGridColumn headerText="提示文字" dataField="tooltip"/>
                        </mx:columns>
                </mx:DataGrid>
                
                <mx:Button id="addBtn"
                        x="174" y="119" 
                        label="新增"
                        click="addMarkerHandler(event)" fontWeight="normal" fontSize="12"/>
                        
                <mx:Button id="removeBtn"
                        x="232" y="119" 
                        label="刪除"
                        enabled="{markerList.selectedIndex != -1}"
                        click="removeMarkerHandler(event)"
                        fontWeight="normal" fontSize="12"/>
                
                <mx:Label text="緯度：{currentLatlng.lat()}" x="10" y="57" fontSize="12" selectable="true" width="272"/>
                <mx:Label text="經度：{currentLatlng.lng()}" x="10" y="85" fontSize="12" selectable="true" width="272"/>
                
                <mx:Canvas x="290" y="57" width="600" height="433" backgroundColor="#FFFFFF">
                        <!-- language = null 時會取瀏覽器語系-->
                        <maps:Map id="myMap"
                                key="ABQIAAAAkOcVHiQqdmsV1CsmWiycyxTJiUO4stL7mkJ7l2ZLr3ZW-k6zdxQnI6k1A5AlNMwoBRFxHhmOwAektQ"
                                mapevent_mapready="mapReadyhandler(event)"
                                mapevent_mappreinitialize="mapPreInitHandler(event)" 
                                language=""
                                right="10" left="10" top="10" bottom="10"/>
                </mx:Canvas>
                        
                <mx:TextInput id="toolTipMsg"
                        enter="addMarkerHandler(null)"
                        focusIn="toolTipMsg.text = ''"
                        x="10" y="119" width="156" 
                        fontSize="12"/> 
</mx:Application>