OpenLaszloでGoogleマップを使う

第4回

緯度、経度を指定して移動する

　それでは、サンプルソースにソースコードを加筆しながら、いろいろな機能を追加していってみましょう。

　まずは、緯度・経度の指定によるマップの表示ポイント変更です。MapクラスのsetCenterメソッドを使うことで表示ポイントを変更できます。サンプルソース「map.lzx」に［地図を移動］ボタンを追加し、「gmap.lzx」にcenterAndZoomメソッドを追加します。

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

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

}

]]></script>

</library>

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