情報ウインドウを表示する
情報ウインドウを使うことで地点名などを表示することができます。地図上に情報ウインドウを表示するには、MapクラスのopenInfoWindowメソッドを実行します。map.lzxに［情報ウインドウを表示］ボタンを追加し、gmap.lzxにopenInfoWindowメソッドを追加します。
サンプルソース（map.lzx）
<?xml version="1.0" encoding="UTF-8"?>
<canvas width ="468"
height="530"
debug ="false">
<!-- gmap.lzxのインクルード -->
<include href="./gmap.lzx"/>
<!-- Googleマップを表示するビュー -->
<view id="GMapView" x ="10" y ="30" options="ignorelayout">
<attribute name="_gmap" type="expression" value="null"/>
<handler name="oninit">
<![CDATA[
this._gmap = new GMap();
//viewにMapsを子として追加する
this.sprite.addChildAt(this._gmap.map, this.sprite.numChildren);
]]>
</handler>
</view>
<button>地図を移動
<handler name="onclick">
<![CDATA[
GMapView._gmap.centerAndZoom(32.791771, 129.864093, 16);
]]>
</handler>
</button>
<button>マーカーを表示
<handler name="onclick">
<![CDATA[
GMapView._gmap.addMarker(32.791771, 129.864093);
]]>
</handler>
</button>
<button>情報ウインドウを表示
<handler name="onclick">
<![CDATA[
GMapView._gmap.openInfoWindow(32.791771,
129.864093,
'株式会社ドゥアイネット',
'長崎市花丘町12番16号小笹ビル2F');
]]>
</handler>
</button>
<simplelayout axis="x" spacing="5" inset="10"/>
</canvas>
サンプルソース（gmap.lzx）
<?xml version="1.0" encoding="UTF-8"?>
<library>
<script when="immediate"><![CDATA[
public final class GMap {
#passthrough (toplevel: true) {
//Google Maps APIライブラリをインポートする
import com.google.maps.*;
import com.google.maps.controls.*;
import com.google.maps.overlays.*;
import com.google.maps.styles.*;
import flash.geom.*;
}#
//Google Maps APIキー
private const KEY = '発行されたAPIキーをここに記入してください。';
private var _map:Map;
public function GMap() {
super();
this._map = new Map();
this._map.key = KEY; //Google Maps APIキーをセットする
this._map.setSize(new Point(450, 340)); //Google Mapsのサイズを設定
}
#passthrough {
//Mapオブジェクトのゲッター
public function get map() {
return this._map;
}
}#
//地図を指定した位置を中心に移動させる
public function centerAndZoom(lat:Number, lon:Number, zoom:Number):void {
this._map.setCenter(new LatLng(lat, lon), zoom, MapType.NORMAL_MAP_TYPE);
}
//地図にマーカーを表示する
public function addMarker(lat:Number, lon:Number):void {
var mk:Marker = new Marker(new LatLng(lat, lon));
this._map.addOverlay(mk);
}
//地図に情報ウインドウを追加する
public function openInfoWindow(lat:Number, lon:Number, title:String, content:String):void {
this._map.openInfoWindow(new LatLng(lat, lon),
new InfoWindowOptions({title: title, content: content}));
}
}
]]></script>
</library>
サンプルソースを実行した結果
マウスを移動したときのイベント取得
地図上のイベントを取得するには、Mapクラスのイベントリスナーを作成します。マウスを移動したときのイベントは、 MapMouseEvent.MOUSE_MOVEです。イベントハンドラの引数で、マウス位置の緯度、経度を取得できます。
map.lzxに、viewの初期化イベントでイベントリスナーを作成するコードと、マウス位置の緯度、経度を表示するtextタグを追加します。
サンプルソース（map.lzx）
<?xml version="1.0" encoding="UTF-8"?>
<canvas width ="468"
height="530"
debug ="false">
<!-- gmap.lzxのインクルード -->
<include href="./gmap.lzx"/>
<!-- Googleマップを表示するビュー -->
<view id="GMapView" x ="10" y ="30" options="ignorelayout">
<passthrough>
<!-- Google Maps APIライブラリをインポートする -->
import com.google.maps.*;
</passthrough>
<attribute name="_gmap" type="expression" value="null"/>
<handler name="oninit">
<![CDATA[
this._gmap = new GMap();
//viewにMapsを子として追加する
this.sprite.addChildAt(this._gmap.map, this.sprite.numChildren);
//マウスが移動したときのイベントリスナーの作成
this._gmap.map.addEventListener(MapMouseEvent.MOUSE_MOVE,
function(event:MapMouseEvent) {
txtLat.setAttribute('text', '経度：' + event.latLng.lat());
txtLng.setAttribute('text', '緯度：' + event.latLng.lng());
}
);
]]>
</handler>
</view>
<text id ="txtLat"
x ="10"
y ="370"
resize ="true"
options="ignorelayout"/>
<text id ="txtLng"
x ="180"
y ="370"
resize ="true"
options="ignorelayout"/>
<button>地図を移動
<handler name="onclick">
<![CDATA[
GMapView._gmap.centerAndZoom(32.791771, 129.864093, 16);
]]>
</handler>
</button>
<button>マーカーを表示
<handler name="onclick">
<![CDATA[
GMapView._gmap.addMarker(32.791771, 129.864093);
]]>
</handler>
</button>
<button>情報ウインドウを表示
<handler name="onclick">
<![CDATA[
GMapView._gmap.openInfoWindow(32.791771,
129.864093,
'株式会社ドゥアイネット',
'長崎市花丘町12番16号小笹ビル2F');
]]>
</handler>
</button>
<simplelayout axis="x" spacing="5" inset="10"/>
</canvas>
サンプルソースを実行した結果
