マーカーを表示する
マーカーとは、地図上の位置を指し示すピン画像のことです。地図上にマーカーを表示するには、Markerクラスを生成し、MapクラスのaddOverlayメソッドの引数に生成したMarkerクラス渡します。map.lzxに[マーカーを表示]ボタンを追加し、gmap.lzxにaddMarkerメソッドを追加します。
<?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> <simplelayout axis="x" spacing="5" inset="10"/> </canvas>
<?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);
} } ]]></script> </library>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/4233/03.png)