萌店ＡＰＩのサンプルアプリ。
萌店ＡＰＩのサンプルアプリを作りましたので紹介です。
こんな感じ。
http://moeten.info/maidcafe/?m=flash&type=shopmapsearch1
| 制作者 | むぎ。 |
| 制作期間 | ２日 |
| リリース日 | 2009年1月2日 |
| 公開場所 | URL |
| ソース | 有 |
| ライブラリ | 萌店ＡＰＩ , GoogleMap for Flash , QRcode |
これからちょこちょこ萌店ＡＰＩのサンプルをアップしていこうと思います。
リンク
ソースビューでの表示はこちら
http://moeten.info/flash/shopmapsearch1/srcview/
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0x333333" creationComplete="creationCompleteHandler(event)" xmlns:ns="com.d_project.qrcode.mx.*" xmlns:local="*" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.CheckBox; import com.google.maps.MapEvent; import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.InfoWindowOptions; import com.google.maps.styles.*; import com.google.maps.overlays.*; import com.google.maps.controls.*; import com.google.maps.*; import com.google.maps.services.*; private var map:Map; [Bindable]private var server:String = "moeten.info"; [Bindable]private var site:String = "maidcafe"; [Bindable]private var apikey:String = "ABQIAAAAq9Z1Z3_S-AQpWPqQe5Gh1RQLtrovA6qSOcMbFg4fCuJXcfHx3RQb3QOrGg_rQ8-UBP5YcrBYyh3sMw"; //初期化関数 private function creationCompleteHandler(e:Event):void{ if(this.parameters.server)server = this.parameters.server; if(this.parameters.site) site = this.parameters.site; if(this.parameters.apikey)apikey = this.parameters.apikey; htsCategoryList.send(); setupMap(); tl.visible = false; } //カテゴリーの作成 private function onHtsCategoryListResultHandler(e:Event):void{ for( var i:int = 0 ; i < htsCategoryList.lastResult.item.length() ; i ++ ){ var myCheckBox:CheckBox = new CheckBox(); myCheckBox.label = htsCategoryList.lastResult.item[i].category; myCheckBox.name = htsCategoryList.lastResult.item[i].cid; myCategoryListBox.addChild(myCheckBox); } } //指定されたカテゴリーで検索 private function onReSearch():void{ var cidArr:Array = new Array(); for( var i:int = 0 ; i < myCategoryListBox.numChildren ; i ++ ){ var chkbox:CheckBox = myCategoryListBox.getChildAt(i) as CheckBox; if( chkbox.selected ) cidArr.push( chkbox.name ); } if( cidArr.length == 0 ){ Alert.show("カテゴリーを選択してください"); return; } if( markerArr.length > 1 ){ while( 1 ){ map.removeOverlay(markerArr.pop()); if( markerArr.length == 0 ) break; } } htsShopList.send({"cid":cidArr.join(",")}); } //マップのセットアップ private function setupMap():void{ map = new Map(); map.key = apikey; myUI.addChild( map ); map.language = "JP"; map.width = myUI.width; map.height = myUI.height; map.addEventListener( MapEvent.MAP_READY, onMapReady ); } //マップのセットアップ完了イベント private function onMapReady(e:Event):void{ //装飾追加 var zoomControl:ZoomControl = new ZoomControl() map.addControl(zoomControl); var pos:PositionControl = new PositionControl(); map.addControl(pos); map.enableContinuousZoom(); map.enableScrollWheelZoom(); map.enableControlByKeyboard(); map.enableCrosshairs(); map.enableDragging(); //センターとズーム指定 map.setCenter( new LatLng(34.50655662164561,134.835205078125) , 7, MapType.NORMAL_MAP_TYPE ); } //マーカーの作成 private var markerArr:Array = new Array(); private function onHtsResultHandler(e:Event):void{ for( var i:int = 0 ; i < htsShopList.lastResult.item.length() ; i ++ ){ var options:MarkerOptions = new MarkerOptions({ strokeStyle:{ color: 0xff0000 }, fillStyle:{ color: 0xffccff, alpha: 0.8 }, label: htsShopList.lastResult.item[i].sid + "" , labelFormat: { bold: true }, //tooltip: htsShopList.lastResult.item[i].shopname + "" , radius: 12, hasShadow: true, clickable: true, draggable: false, gravity: 0.5, distanceScaling: false }); var latlng:LatLng = new LatLng( htsShopList.lastResult.item[i].wgps_lat , htsShopList.lastResult.item[i].wgps_lon ); setMarker( i , latlng , options ); } } //アイコンの作成 private function setMarker( myid:int , latlng:LatLng , options:MarkerOptions ):void{ var marker:Marker = new Marker( latlng , options ); markerArr.push(marker); marker.addEventListener(MapMouseEvent.ROLL_OVER , function():void{ myDG1.selectedIndex = myid; var latlng:LatLng = new LatLng( htsShopList.lastResult.item[myid].wgps_lat , htsShopList.lastResult.item[myid].wgps_lon ); var infoWindow:InfoWindowOptions = new InfoWindowOptions(); infoWindow.contentHTML = "" + htsShopList.lastResult.item[myid].shopname; marker.openInfoWindow(infoWindow); }); marker.addEventListener(MapMouseEvent.ROLL_OUT , function():void{ marker.closeInfoWindow(); }); marker.addEventListener(MapMouseEvent.CLICK , function():void{ myDG1.selectedIndex = myid; }); map.addOverlay(marker); } private function onItemClicked():void{ tl.visible = true;; var latlng:LatLng = new LatLng( myDG1.selectedItem.wgps_lat , myDG1.selectedItem.wgps_lon ); var infoWindow:InfoWindowOptions = new InfoWindowOptions(); infoWindow.contentHTML = "" + htsShopList.lastResult.item[myDG1.selectedIndex].shopname; markerArr[myDG1.selectedIndex].openInfoWindow(infoWindow); map.setCenter(latlng); } private function checkAll():void{ for( var i:int = 0 ; i < myCategoryListBox.numChildren ; i ++ ){ var chkbox:CheckBox = myCategoryListBox.getChildAt(i) as CheckBox; chkbox.selected = true; } } private function checkNone():void{ for( var i:int = 0 ; i < myCategoryListBox.numChildren ; i ++ ){ var chkbox:CheckBox = myCategoryListBox.getChildAt(i) as CheckBox; chkbox.selected = false; } } ]]> </mx:Script> <!--############ ############--> <mx:HTTPService id="htsCategoryList" url="{'http://'+server+'/'+site+'/?cid=list&m=api'}" resultFormat="e4x" result="onHtsCategoryListResultHandler(event)"/> <mx:HTTPService id="htsShopList" url="{'http://'+server+'/'+site+'/?type=shop&tid=&cid=1&m=api'}" resultFormat="e4x" result="onHtsResultHandler(event)"/> <!--############ ############--> <mx:HBox width="100%" height="100%" paddingTop="20" paddingBottom="20"> <mx:VBox width="200" height="100%"> <mx:HBox width="100%"> <mx:Button label="すべて選択" click="checkAll()" width="50%"/> <mx:Button label="選択除去" click="checkNone()" width="50%"/> </mx:HBox> <mx:VBox id="myCategoryListBox" width="100%" height="300" borderColor="0xcccccc" borderStyle="solid" borderThickness="1" backgroundAlpha="0.8" backgroundColor="0xcccccc" paddingLeft="5" paddingTop="5" paddingBottom="5" paddingRight="10"/> <mx:Button click="onReSearch()" label="検索" width="100%" height="48"/> <mx:DataGrid id="myDG1" dataProvider="{htsShopList.lastResult.item}" width="100%" height="100%" dragEnabled="true" itemClick="onItemClicked()" visible="true" backgroundAlpha="0.7" alternatingItemColors="[0xffffff,0xcccccc]"> <mx:columns> <mx:DataGridColumn headerText="番号" dataField="sid" width="35" backgroundColor="0xcccccc"/> <mx:DataGridColumn headerText="画像" width="30"> <mx:itemRenderer> <mx:Component> <mx:Image source="{data.image.image1}" width="30" height="30"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn> <mx:itemRenderer> <mx:Component> <mx:VBox clipContent="false"> <mx:Label text="{data.category}"/> <mx:Label text="{data.shopname}"/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:VBox> <mx:VBox width="100%" height="100%"> <mx:Canvas width="100%" height="100%"> <mx:UIComponent id="myUI" width="100%" height="100%"/> <mx:TileList id="tl" dataProvider="{myDG1.selectedItem}" itemRenderer="shopDetail" showEffect="Fade" width="260" height="460" top="10" right="10" selectable="false" backgroundAlpha="0.8" borderColor="0x333333" borderStyle="solid" borderThickness="1" cornerRadius="5"/> </mx:Canvas> </mx:VBox> </mx:HBox> <mx:LinkButton click="navigateToURL(new URLRequest( 'http://moeten.info/' ) )" label="moeten.info" bottom="0" right="10" color="0xcccccc" rollOverColor="0x999999" paddingTop="0" paddingBottom="0"/> </mx:Application>
