OpenLaszloでGoogleマップを使う

第4回

マーカーを表示する

　マーカーとは、地図上の位置を指し示すピン画像のことです。地図上にマーカーを表示するには、Markerクラスを生成し、MapクラスのaddOverlayメソッドの引数に生成したMarkerクラス渡します。map.lzxに［マーカーを表示］ボタンを追加し、gmap.lzxにaddMarkerメソッドを追加します。

サンプルソース（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>

  <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);
  }

}

]]></script>

</library>

サンプルソースを実行した結果