位置情報の利用

Geolocation プラグインを利用すると、端末のロケーション情報にアクセスすることが可能です。

Geolocation プラグインを利用し緯度経度を取得します。さらに、ついでに取得した緯度経度を、 Google のクライアントサイド API である Google Maps JavaScript API のリバース・ジオコーディングで可読な住所に変換してみます。

Google の API を呼ぶ所は HTTP プラグインを使います。

プログラムの動作は次のようになります。

プログラムを起動すると、トグルスイッチとボタンのある画面が表示されます。

トグルスイッチは高精度のロケーションサービスを利用するかどうかのスイッチです。ボタンを押すと位置情報の取得を開始し、情報がとれ次第、次のようにカード形式で情報を表示します。

はじめに、端末のロケーションサービスから緯度経度が取得され、つぎに HTTP で Google の API を呼び住所を表示します。このため、実際にプログラムを実行すると、表示するのにわずかながら時間差があります。

Ionic (Angular) ではこうした非同期の処理も、非常に簡単に実装することが可能です。

プログラムの作成

ここでは Ionic 2 を使います。

$ ionic start geo1 blank --v2

また、Font Awesome も使いますので、「Ionic 2 プロジェクトで Font Awesome を使う方法」の手順を参考に Font Awesome もインストールします。

プラグインのインストール

Geolocation プラグインをインストールするには、プロジェクトフォルダにて次のコマンドを実行します。

$ ionic plugin add cordova-plugin-geolocation
$ npm install --save @ionic-native/geolocation

HTTP プラグインのインストールは次の通りです。

$ ionic plugin add cordova-plugin-http
$ npm install --save @ionic-native/http

ページテンプレート

ここでは blank アプリケーションテンプレートで既定で作成される home ページをそのまま変更します。

テンプレート src/pages/home/home.html は次の通り。

<ion-header>
  <ion-navbar>
    <ion-title>
      Geolocation
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Enable High Accuracy</ion-label>
      <ion-toggle
        #t1
        [checked]="enableHighAccuracy"
        (ionChange)="onHighAccuracyChange(t1.checked)"></ion-toggle>
    </ion-item>
  </ion-list>

  <button ion-button block (click)="getLocation()">Get Location</button>

  <ion-card *ngIf="isLocAvail">
    <ion-card-header>
      <ion-icon name="pin"></ion-icon>
      Coordinates
    </ion-card-header>
    <ion-card-content>
      {{loc_lat}}, {{loc_lng}}
    </ion-card-content>
  </ion-card>
  <ion-card *ngIf="isLocAvail && rev_geo">
    <ion-card-header>
      <i class="fa fa-map-signs"></i>
      Address
    </ion-card-header>
    <ion-card-content>
      {{rev_geo}}
    </ion-card-content>
  </ion-card>
  <ion-card *ngIf="isLocError && !isLocAvail">
    <ion-icon name="warning"></ion-icon>
    Unabled to get your location information.
  </ion-card>
</ion-content>

高精度の位置情報利用を有効にするかどうかきめるオプションの選択に、トグルスイッチ ion-toggle を利用しています。

ion-toggle の ON/OFF は checked の true/false で制御できます。値が変更したら ionChange イベントが発生するので、そのハンドラを設定しています。

#t1 はテンプレート参照変数です。テンプレート参照変数を用いて ionChange のイベントハンドラに、checked 属性を渡しています。

テンプレート参照変数については Angular 入門の記事「テンプレート参照変数」をみてください。

プログラム

TypeScript のコード src/pages/home/home.ts は次の通りです。

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation, GeolocationOptions } from '@ionic-native/geolocation';
import { HTTP } from '@ionic-native/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ Geolocation, HTTP ],
})
export class HomePage implements OnInit {

  // Flags
  isLocAvail: boolean;
  isLocError: boolean;

  // options
  enableHighAccuracy: boolean = false;

  // Results
  loc_lng: number;
  loc_lat: number;
  rev_geo: string;

  constructor(
    private geolocation: Geolocation,
    private http: HTTP,
    public navCtrl: NavController) {}

  initFlags(){
    this.isLocAvail = false;
    this.isLocError = false;
  }

  ngOnInit(){
    this.initFlags();
  }

  onHighAccuracyChange(t: boolean){
    this.enableHighAccuracy = t;
  }

  getLocation(){
    this.initFlags();

    // オプションの設定
    let options: GeolocationOptions = {
      enableHighAccuracy: this.enableHighAccuracy
    };

    // 緯度経度の取得
    this.geolocation.getCurrentPosition(options)
      .then((resp)=>{
        this.loc_lng = resp.coords.longitude;
        this.loc_lat = resp.coords.latitude;

        this.isLocAvail = true;
        this.isLocError = false;

          // 住所の取得
        if(this.isLocAvail){
          let apiKey = "YOUR KEY GOES HERE";
          this.http.get(
            'https://maps.googleapis.com/maps/api/geocode/json?latlng='
            + `${this.loc_lat},${this.loc_lng}&key=${apiKey}`,{},{})
          .then((httpResp)=>{
            this.rev_geo = JSON.parse(httpResp.data).results[0].formatted_address;
          })
          .catch((err)=>{
            console.log(err);
          });

        }
      })
      .catch((err)=>{
        this.isLocAvail = false;
        this.isLocError = true;
        console.log(err);
      });
    }

}

ロケーションサービスは基本的に電力消費の少ない手段を用いて、位置情報を取得します。 GPS 等の高精度のサービスは既定で使用しません。

厳密な位置情報が必要ない場合はそれで構わないのですが、高精度の情報を必要とする場合は、 PositionOptions の enableHeighAccuracy オプションを true にします。

今回はトグルスイッチの ON/OFF がこのオプションの true/false に関わります。

以上で、Geolocation プラグイン、HTTP プラグイン等を利用した、現在の住所取得アプリケーションの開発法方を説明しました。

ホーム » ネイティブ » 位置情報の利用