Google Maps - infoWindow
地図をクリックするとその地点に情報ウインドウを出し、タイトルとクリック地点の緯度経度を表示させた。
情報ウインドウは Map インスタンスの openInfoWindow を使う。
public function openInfoWindow(latlng:LatLng, options:InfoWindowOptions = null):IInfoWindow |
引数に、緯度経度と情報ウインドウオプションを設定する。
情報ウインドウオプションを設定しないとデフォルト値が使われる。
/** *param:Object (default = null) — An object that contains a set of initial values for the new InfoWindowOptions object. The fields are: * strokeStyle:StrokeStyle * fillStyle:FillStyle * title:String * titleHTML:String * titleFormat:TextFormat * titleStyleSheet:StyleSheet * content:String * contentHTML:String * contentFormat:TextFormat * contentStyleSheet:StyleSheet * width:Object * height:Object * cornerRadius:Object * padding:Object * hasCloseButton:Object * hasTail:Object * tailWidth:Object * tailHeight:Object * tailOffset:Object * tailAlign:Object * pointOffset:Point * hasShadow:Object * */ public function InfoWindowOptions(param:Object = null) |
情報ウインドウオプションは多岐にわたっている。
把握するまで時間がかかりそう。
Javascript API と同じような作りになっているのが助かる。
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.Color; import com.google.maps.MapMouseEvent; import com.google.maps.InfoWindowOptions; import com.google.maps.controls.*; import com.google.maps.styles.*; import com.google.maps.overlays.*; import com.hydrotik.go.*; HydroTween.VERBOSE = false; // start create map var map:Map = new Map(); // set Google Map API key map.key = "YOUR KEY"; // Map size map.setSize(new Point(stage.stageWidth, stage.stageHeight - 30)); // Map position map.y = 30; // hyde map map.alpha = 0; // set MAP_READY handler map.addEventListener(MapEvent.MAP_READY, onMapReady); // set language -- defalut is English map.language = "ja"; // set Maptype Control map.addControl(new MapTypeControl()); // set Navigation Control -- zoom / move map.addControl(new NavigationControl()); // Overview Control style var cpOption:Object = { controlStyle:{bevelStyle: BevelStyle.BEVEL_NONE,strokeStyle: {color: Color.GRAY10,alpha: 1.0,thickness: 1.0}} ,padding:{x:0,y:0} ,position: new ControlPosition(ControlPosition.ANCHOR_BOTTOM_RIGHT) ,size: {x: 100*stage.stageWidth/stage.stageHeight,y: 100} }; // set Overview Control map.addControl(new OverviewMapControl(new OverviewMapControlOptions(cpOption))); // display this.addChild(map); // method of MAP_READY handler function onMapReady(event:Event):void { map.removeEventListener(MapEvent.MAP_READY, onMapReady); // Lat_Lng var latLng:LatLng = new LatLng(33.59013936225428,130.40021051520534); // Marker option var markerOptions:MarkerOptions = new MarkerOptions({ strokeStyle: { thickness: 1.6, alpha: 1, color:0xff00ee }, fillStyle: { color: 0x174baa, alpha: 0.9 }, labelFormat: { font: "_sans", size: 10, color: 0xe1f1cb, align: TextFormatAlign.CENTER }, gravity: 0.6, radius: 14, hasShadow: true, draggable: true, tooltip: "マーカーをドラッグ", label:"天神" }); // Marker var marker:Marker = new Marker(latLng, markerOptions); // Marker on map.addOverlay(marker); // show map map.setCenter(latLng, 14, MapType.NORMAL_MAP_TYPE); // show lat lng textField showLatLng(latLng.toString()); // show 緯度経度 HydroTween.go(map,{alpha:1},1.5); // show map HydroTween.go(LatLng_mc,{alpha:1},2); // marker drag event marker.addEventListener(MapMouseEvent.DRAG_END,dragEndHandler); // click on the map map.addEventListener(MapMouseEvent.CLICK,cliclHandler); } // show textField function showLatLng (s:String):void{ latLng_txt.text = s; } // drag end handler function dragEndHandler (e:MapMouseEvent):void { showLatLng(format(e.latLng.toString())); } function format (s:String):String { return s.substring(1, s.length - 1); } // click handler function cliclHandler (e:MapMouseEvent):void { var geo:String = format(e.latLng.toString()); var options:Object = { title : "Lat_Lng" ,content : geo } var infoOptions:InfoWindowOptions = new InfoWindowOptions(options); map.openInfoWindow(e.latLng,infoOptions); showLatLng(geo); } |