Ionic4とCapacitorを使用した位置データの取得

投稿日: 2022-04-20 2022-04-20

以下に、コンデンサを使用してIonic4プロジェクトでGPS座標を取得する方法の簡単なデモを示します。

Capacitorのことを聞いたことがない場合は、IonicチームのCordovaの代わりになります。プログレッシブウェブアプリ（PWA）、iOS、Android向けのネイティブ機能とプラグインの提供に重点を置いています。それはハイブリッドモバイル開発の未来です。

インストール

CLIを使用してIonicプロジェクトを作成することから始めます。

$ ionic start coordinates tabs --type=angular --capacitor

$ cd coordinates

コンデンサのセットアップ

次に、新しく作成したIonicプロジェクトにCapacitorを追加し、アプリ名とアプリID（例：com.example.app）を含めます。そのタスクを実行するためにnpxを使用します。

$ npx cap init coordinates com.example.app

Ionicビルドを実行して、wwwフォルダーを作成します。

$ ionic build

次の方法でプラットフォームを追加できます。

$ npx cap add ios
$ npx cap add android

次に、ionicserveを実行してブラウザでアプリをビルドします。

$ ionic serve

デフォルトのイオンタブのダミーデータが表示されます。好みのテキストエディタでプロジェクトを開きます。

tab1.page.htmlを開き、ion-contentタグ内のすべてを削除して、以下のマークアップに置き換えます。

<ion-card>
  <ion-card-header>
    <ion-card-title>Coordinates</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ion-item>Latitude: {{ latitude }}</ion-item>
    <ion-item>Longitude: {{ longitude }}</ion-item>
  </ion-card-content>
</ion-card>

上記は、座標を印刷する簡単なIonicカードです。アプリでは、これらの座標をGoogleマップ、天気などの別のプラグインまたはサービスにプラグインすることをお勧めします。

tab1.page.tsファイルで、@capcitor/coreからgeolocationプラグインをインポートします。

import { Geolocation} from '@capacitor/core';

次のタイプの経度と緯度の変数を作成します。

latitude: number;
longitude: number;

コンストラクターで、間もなく作成される関数this.getLocataion()を呼び出します。

constructor() {
  this.getLocation();
}

次に、その非同期getLocation関数を作成し、インポートしたGeolocationクラスでgetCurrentPositionpromiseを呼び出します。

async getLocation() {
  const position = await Geolocation.getCurrentPosition();
  this.latitude = position.coords.latitude;
  this.longitude = position.coords.longitude;
}

コードでは、以前に作成した変数に緯度と経度を割り当てます。画面は次のようになります。

coordinates app

以上です！簡単です！公式ドキュメントにアクセスして、watchPositionやaddListenerなどのGeolocation APIで利用可能な他のメソッドと、使用に関する特定の許可に関する注意事項を確認してください。 iOSとAndroidで。

getdocs

13036