OpenLaszloでGoogleマップを使う

第4回

住所から緯度、経度を取得する

　com.google.maps.servicesパッケージのClientGeocoderクラスを利用すれば住所から緯度・経度を取得できます。map.lzxに［住所検索］ボタンと住所を入力するinputtextタグを追加し、gmap.lzxにqueryAddressメソッドを追加します。

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

  <inputtext id     ="txtAddress"
                x       ="10"
                y       ="30"
                width  ="450"
                bgcolor="yellow"
                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>

    <button>住所検索
      <handler name="onclick">
      <![CDATA[
        GMapView._gmap.queryAddress(txtAddress.text);
      ]]>
      </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}));
  }
  
    //住所から緯度、経度を取得して移動する
    public function queryAddress(address:String):void {
      var v_geocoder:ClientGeocoder = new ClientGeocoder(new ClientGeocoderOptions());
      var v_this = this;
      //住所からジオコードに成功したときのイベントリスナーの作成
      v_geocoder.addEventListener(
        GeocodingEvent.GEOCODING_SUCCESS,
        function(event:GeocodingEvent) {
          var v_lat:Number = event.response.placemarks[0].point.lat(),
          v_lng:Number = event.response.placemarks[0].point.lng();
          v_this._map.clearOverlays();
          v_this.centerAndZoom(v_lat, v_lng, 16);
          v_this.openInfoWindow(v_lat, v_lng, '', address);
        }
      );
      v_geocoder.geocode(address);
    }

}

]]></script>

</library>

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

まとめ

　今回は、OpenLaszloからGoogleマップを使用する方法について説明しました。次回は、実際の業務でOpenLaszloを使って開発したスケジューラーを例にして、開発において工夫した点など紹介する予定です。