Cordova:ionic2(Angular2)にてGEOロケーションで現在地を取得する

記事公開日:
最終更新日:

This post is also available in: English-US (英語)

Cordova、そしてionic2(Angular2)を使って、GEOロケーションで現在地を取得する方法のメモです。
サンプルコードは Typescript で書いています。

メモの走り書きのようなコードですので、適宜コードを付け加えたりして調整する必要があります。

Cordovaプラグインをインストール

とにもかくにも、Cordovaプラグインをインストールします。

cordova plugin add cordova-plugin-geolocation

GEOロケーションで現在地を取得する

Angular2 の謎仕様だけでも中々ですが、Typescript で書いて何て言われるとお腹一杯ですね。
ionic2のドキュメント https://ionicframework.com/docs/v2/native/geolocation/Geolocationのパラメーター設定などが書いてあります。

// sample.ts
import {Geolocation} from 'ionic-native';
// 初期化処理
export class Sample implements OnInit {
    geo_latitude: any;
    geo_longitude: any;
 }
// ionic2のドキュメントが参考になります。
GetGeolocation(){
  Geolocation.getCurrentPosition().then((resp) => {
    this.geo_latitude = resp.coords.latitude;
    this.geo_longitude = resp.coords.longitude;
    console.log("Latitude: ", resp.coords.latitude);
    console.log("Longitude: ", resp.coords.longitude);
  });
}

HTMLは以下のような感じになります。

<!-- sample.html -->
<ion-buttons>
  <button (click)="GetGeolocation()">
    <ion-icon></ion-icon>
    GetGeolocation
  </button>
</ion-buttons>
<ion-card>
  {{geo_latitude}}
</ion-card>
<ion-card>
  {{geo_longitude}}
</ion-card>
No tags for this post.

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。