グーグルマップのひながた（FLEX）

Out of Order

ここ１ヶ月ほど、投球でトップからヒジを旋回する際に背中の痛みがあった。
病院に行ったら、右の広背筋が軽い肉離れを起こしていた。

オーソドックスな例

XML を使わない Static なフラッシュのサンプル。ソースは記事の最後。

データグリッドコラムをサイドバーがわりに配置
データグリッドはソート可
ジオコード検索可
マップタイプ選択をプルダウン
リンク付与
線（Polyline）と面（Polygon）はクリックで infoWindow を出す
DividedBox に resizeEffect をかける（左側ツール群とマップの境目）
マーカーに使う png 画像は適宜用意を

Polyline と Polygon を多用する場合は Javascript API よりもフラッシュのほうが当然レスポンスが良い。用いないなら Javascript API で充分。以下のソースを適宜書き換えてみませう。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" backgroundColor="#3333ff">
<mx:Style> .centerAlignDataGridCol { textAlign: center; } </mx:Style>
<mx:Panel title="Seis Pesos: Simple Map" width="100%" height="100%" headerHeight="20" cornerRadius="0" dropShadowEnabled="false" borderThicknessBottom="5" borderThicknessLeft="5" borderThicknessRight="5" borderThicknessTop="0">
<mx:HDividedBox width="100%" height="100%">
<mx:VBox width="200" height="100%" paddingTop="3" paddingLeft="3" paddingBottom="3" resizeEffect="Resize">
<mx:HBox>
<mx:TextInput id="address" text="" dropShadowColor="0x000000" enter="doGeocode(event);" width="100"/>
<mx:Button id="submitButton" label="検索" click="doGeocode(event);" cornerRadius="0" />
</mx:HBox>
<mx:HBox>
<mx:ComboBox id="mapType" labelField="label" change="onChangeMapType()" labelFunction="labelFunction" cornerRadius="0"/>
<mx:LinkButton label="Home" click="newWin('http://japonyol.net/editor/')" fontWeight="bold" cornerRadius="0"/>
</mx:HBox>
<mx:DataGrid id="mapGrid" dataProvider="{infoGrid}" headerColors="[#eeeeff, #ccccff]" verticalScrollPolicy="on" width="100%" height="100%" sortableColumns="true" itemClick="showDesc(event)">
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="No." dataField="num" width="40" headerStyleName="centerAlignDataGridCol" textAlign="left">
<mx:itemRenderer>
<mx:Component>
<mx:Text width="100%" selectable="false" htmlText="{data.num}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="駅名" dataField="label" width="50" headerStyleName="centerAlignDataGridCol" textAlign="left"/>
<mx:DataGridColumn headerText="Name" dataField="ename" headerStyleName="centerAlignDataGridCol" textAlign="left"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:UIComponent id="mapHolder" resizeEffect="Resize" initialize="onHolderCreated(event);" resize="onHolderResized(event)" width="100%" height="100%"/>
</mx:HDividedBox>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
import flash.events.Event;
import com.google.maps.interfaces.IMapType;
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.MapType;
import com.google.maps.controls.*;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Polyline;
import com.google.maps.overlays.PolylineOptions;
import com.google.maps.overlays.Polygon;
import com.google.maps.overlays.PolygonOptions;
import com.google.maps.InfoWindowOptions;
import com.google.maps.services.*;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.styles.FillStyle;
import mx.controls.Alert;
import mx.effects.Glow;
import mx.collections.ArrayCollection;
public var markers:Array = [
{latlng: new LatLng(34.702865, 135.497823), num: "M16", label: "梅田", ename: "Umeda", n: "0" },
{latlng: new LatLng(34.692315, 135.500962), num: "M17", label: "淀屋橋", ename: "Yodoyabashi", n: "0" },
{latlng: new LatLng(34.706869, 135.505242), num: "T19", label: "中崎町", ename: "Nakazakicho", n: "1" },
{latlng: new LatLng(34.701070, 135.499551), num: "T20", label: "東梅田", ename: "Higashi-Umeda", n: "1" },
];
private var map:Map;
private var glowEffect:Glow;
[Bindable] private var infoGrid:ArrayCollection = new ArrayCollection();
[Embed(source="assets/12red.png")] private var mIcon:Class;
[Embed(source="assets/12purple.png")] private var zIcon:Class;
public function onHolderCreated(event:Event):void {
map = new Map();
map.language = "en";
map.key = "ABQIAAAAAObg9xo1xsyXIuPEWNUfDxTvX0vz2OLAijajeRSW_Qz-jLLf6BSe06NAgaXeOd7a3yeWGxxtw1C-SA";
map.addEventListener(MapEvent.MAP_READY, onMapReady);
mapHolder.addChild(map);
}
public function onHolderResized(event:Event):void {
map.setSize(new Point(mapHolder.width, mapHolder.height));
}
private function onMapReady(event:Event):void {
map.enableScrollWheelZoom();
map.enableContinuousZoom();
mapType.dataProvider = [MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE];
mapType.selectedIndex = 0;
map.setCenter(new LatLng(34.7, 135.5), 14, mapType.dataProvider[0]);
map.addControl(new NavigationControl());
var lastMarker:Object = null;
for (var i:int = 0; i < markers.length; i++) {
var currentMarker:Object = markers[i];
createMarker(currentMarker);
lastMarker = currentMarker;
}
var polygon:Polygon = new Polygon([
new LatLng(34.704197,135.495586),
new LatLng(34.704735,135.49696),
new LatLng(34.704179,135.497056),
new LatLng(34.703606,135.495887),
new LatLng(34.704197,135.495586)
], new PolygonOptions({
strokeStyle: new StrokeStyle({
color: 0xff0000,
thickness: 2,
alpha: 0.8}),
fillStyle: new FillStyle({
color: 0xff0000,
alpha: 0.5})
}));
map.addOverlay(polygon);
var myFilters:Array = new Array();
myFilters.push(new DropShadowFilter());
polygon.foreground.filters = myFilters;
glowEffect = new Glow();
glowEffect.alphaFrom = 1;
glowEffect.alphaTo = 0;
glowEffect.blurXFrom = 0;
glowEffect.blurXTo = 255;
glowEffect.blurYFrom = 0;
glowEffect.blurYTo = 255;
glowEffect.color = 0xff0000;
glowEffect.duration = 2000;
glowEffect.strength = 3;
glowEffect.target = polygon.foreground;
polygon.addEventListener(MapMouseEvent.ROLL_OVER, function(event:MapMouseEvent): void {
glowEffect.stop();
glowEffect.play();
});
polygon.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {
map.openInfoWindow(event.latLng, new InfoWindowOptions({content: "ヨドバシカメラ", width: 90}));
});
var polylineA: Polyline = new Polyline([
new LatLng(34.703280, 135.497636),
new LatLng(34.702865, 135.497823),
new LatLng(34.701868, 135.498279),
new LatLng(34.701326, 135.499046),
new LatLng(34.700876, 135.499535),
new LatLng(34.698733, 135.500334),
new LatLng(34.698217, 135.500484),
new LatLng(34.696408, 135.501278),
new LatLng(34.692315, 135.500962)
], new PolylineOptions({ strokeStyle: new StrokeStyle({color: 0xCC0033, thickness: 6, alpha: 0.8}) }));
map.addOverlay(polylineA);
polylineA.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {
map.openInfoWindow(event.latLng, new InfoWindowOptions({content: "御堂筋線 Midosuji Line", width: 160}));
});
var polylineB: Polyline = new Polyline([
new LatLng(34.706869, 135.505242),
new LatLng(34.706433, 135.504679),
new LatLng(34.706115, 135.504330),
new LatLng(34.702561, 135.499706),
new LatLng(34.702380, 135.499551),
new LatLng(34.701934, 135.499336),
new LatLng(34.701652, 135.499358),
new LatLng(34.701070, 135.499551)
], new PolylineOptions({ strokeStyle: new StrokeStyle({ color: 0x663399, thickness: 6, alpha: 0.8}) }));
map.addOverlay(polylineB);
polylineB.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {
map.openInfoWindow(event.latLng, new InfoWindowOptions({content: "谷町線 Tanimachi Line", width: 160}));
});
}
public function createMarker(currentMarker:Object):void {
var customIcon: Object;
var n: String = currentMarker.n;
var num: String = currentMarker.num;
var label: String = currentMarker.label;
var ename: String = currentMarker.ename;
if (n == "0") {
customIcon = new mIcon();
} else if (n == "1") {
customIcon = new zIcon();
}
var smarker:Marker = new Marker(currentMarker.latlng, new MarkerOptions({icon: customIcon, iconAlignment: MarkerOptions.ALIGN_VERTICAL_CENTER | MarkerOptions.ALIGN_HORIZONTAL_CENTER}));
smarker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
smarker.openInfoWindow(new InfoWindowOptions({title:currentMarker.label, content:currentMarker.ename, width:120}));
});
infoGrid.addItem({num:num, label:label, ename:ename, n:n, Marker:smarker});
map.addOverlay(smarker);
}
private function doGeocode(event:Event):void {
var geocoder:ClientGeocoder = 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, 14);
var marker:Marker = new Marker(placemarks[0].point, new MarkerOptions({
strokeStyle: new StrokeStyle({color: 0x000000, thickness: 2}),
fillStyle: new FillStyle({color: 0xFF0000, alpha: 0.7}),
label: "?",
labelFormat: {bold: true},
radius: 10
})
);
marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
});
map.addOverlay(marker);
}
});
geocoder.addEventListener(
GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void {
Alert.show("Geocoding failed");
trace(event);
trace(event.status);
});
geocoder.geocode(address.text);
}
public function showDesc(event:Event):void {
var marker:Marker = mapGrid.selectedItem.Marker;
marker.dispatchEvent(new MapMouseEvent(MapMouseEvent.CLICK, marker, marker.getLatLng(), true, true));
}
private function onChangeMapType():void {
if (mapType.selectedItem)
map.setMapType(IMapType(mapType.selectedItem));
}
private function labelFunction(o:Object ):String {
if (o is IMapType)
return IMapType(o).getName();
return "";
}
private function newWin(url:String):void {
var urlRequest:URLRequest = new URLRequest(url);
navigateToURL(urlRequest, "_blank");
}
]]>
</mx:Script>
</mx:Application>

コンパイルの仕方などはコチラを。
他のフラッシュ版サンプル、Javascript 版サンプルも適宜。

グーグルマップのひながた（FLEX）

Google Maps API

カテゴリ

新しい記事