Ionicフレームワークでのジオポイント実装ガイド

ionicフレームワークでのジオポイントの使用 はじめに parseを使用すると、オブジェクトに実世界の緯度と経度の座標を関連付けることができます。 parsegeopoint を parseuser に追加することで、他のユーザーに最も近いユーザーを簡単に見つけたり、アプリのユーザーの位置を表示したり、ユーザーの位置情報を保存したりすることができます。 また、任意の parseobject に parsegeopoint を関連付けることもできます。たとえば、アプリが物理的な店舗に関連している場合、これらの店舗の位置を表示するページを作成したり、ユーザーに最も近い店舗を示したりすることができます。この関連付けの使用例のもう一つは、アプリがキャラクターを表すためにparseobjectsを作成したゲームで、これらのキャラクターにparsegeopointsを追加することで、プレイヤーの進行に沿って表示できるようになります。 このチュートリアルでは、back4appを通じてparsegeopointのいくつかの機能を使用する方法を説明します。 このチュートリアルに従った後、次のことができるようになります 前提条件 1 google apiキーの設定 インストールするには、 angular google maps agm を使用します。 生成されたキーを /src/app/app module tsに追加してsdkをインポートします。 2 ユーザーの位置を取得する ユーザーの位置を取得するには、 ionic geolocation プラグインをインストールする必要があります。 geolocationを /src/app/app module tsのプロバイダーにインストールしてインポートしたので、位置を取得するメソッドを実装し、結果をクラス属性に保存しましょう。 3 地図を表示するページを作成する ユーザーの位置がわかったので、前述の\[angular google maps]を使用して地図を表示するページを作成しましょう。 まず、ヘルパーを実行します 現在、地図が表示している 現在 の位置を保持するマーカーと、地図上のピンポイントとなるマーカーの配列を受け取るようにしましょう。 maps htmlを開いて、データを表示させましょう。 4 地図に現在のユーザーの位置を表示する これで地図の位置を表示するページができました。 home tsに戻り、地図上にユーザーの位置を表示するメソッドを実装しましょう parseの簡単さを利用して、ユーザーの位置に最も近いピアを探しましょう どれほど簡単かがわかります。基本的に、ユーザーコレクションのクエリオブジェクトをインスタンス化し、near()を呼び出して最も近い地理的位置を探すだけでした。 5 parsegeopointをparseobjectsに関連付けるためにback4appを設定する あなたが構築している例のアプリが、物理的な提携先を持つ店舗のグループに関連付けられていると仮定します。この店舗のすべての物理的な提携先を地図に表示することは興味深いでしょう。そのためには、back4pp dashboardでstoresクラスを作成し、既存の店舗をparseobjectsとして保存し、その位置を記録します。その後、アプリは物理的な提携先をクエリし、地図上にその位置を表示できるようになります。以下の手順が役立ちます。 「 back4appのウェブサイト 」に移動し、ログインしてアプリを見つけ、そのダッシュボードを開きます。 core > browser > クラスを作成に移動します。以下の画像に示すように。 「どのタイプのクラスが必要ですか？」のフィールドで、カスタムオプションを選択します。 「何と呼びますか？」のフィールドに「 stores 」と入力し、次に「クラスを作成」ボタンをクリックします。 すると、「 stores 」という新しいクラスが表示され、2つの列を挿入する必要があります。データ型がstringの列「name」と、データ型がgeopointの列「location」です。あなたのクラスはこのようになります 今、このクラスに情報を入力します。そのためには、上部右側のメニューまたはページの中央にある「行を追加」ボタンをクリックします。以下の画像に示すように。 次に、必要な情報で行を埋めてください：店舗の名前とその緯度と経度。いくつかのデータを挿入した後、あなたのstoresクラスは以下の画像のようになります。さらにデータを挿入したい場合は、上部の「行を追加」ボタンをクリックするか、最後のデータ行の下にある+ボタンをクリックできます。 これで、アプリ内で店舗の位置情報を使用する準備が整いました。 6 地図上にすべての店舗の位置を表示する 店舗の位置が保存されたので、オブジェクトを取得して表示するメソッドをコーディングしましょう。 簡単ですよね？では、最も近いものを取得しましょう。 以前に行ったように、最も近いユーザーを取得するのと同じように見えます。 7 ホームページにボタンを追加する これらのメソッドを呼び出す方法がないことに気付いたでしょう。では、home tsにボタンを追加して実現しましょう！ 8 アプリをテストする back4appのウェブサイト https //www back4app com/ にログインします。 アプリを見つけて、ダッシュボード > コア > ブラウザ > ユーザーをクリックし、位置情報に関連付けられたユーザーをいくつか作成して、getclosestuserメソッドが機能するようにします。 実際のデバイスまたはブラウザでアプリを実行して、サインアップおよびログインします。すべての機能を試してみてください！ 完了しました！ この段階で、back4appを通じてparsegeopointのいくつかの機能を使用できます！