- Location関数を使い地図情報をGPSから取得して地図を表示しよう！
- 緯度・経度は以下の関数で取得できます。
- SharePointListに緯度（Latitude）・経度（Longitude）・場所（Place）を追加します。
- PowerApps編集画面
- 新規スクリーン（PlaceScreen）の追加
- 「＋新しい画面」⇒「空」のレイアウト
- 「画面」名を「PlaceScreen」に変更します。
- 「挿入」⇒「編集フォーム」と選択します。
- 「データソース」⇒「WorkCompletionReport」を選択します。
- 「フィールド」の各項目が表示されます。
- 「フィールドの編集」をクリックします。
- 不要な「フィールド」を削除後、「Latitude」「Longitude」「Place」のみにします。
- 「DataCardValueXX」選択⇒「詳細設定」⇒「プロパティを変更するためにロックを解除します。」をクリック。
- Default = Parent.Default ⇒ 「Location.Latitude」と設定しますが、 今回はIf構文で設定します。
- DataCardValue26 , DataCardValue27 , DataCardValue28 の各々のDisplayModeを「DisplayMode.View」に変更しておきます。
- 「Form」のプロパティ⇒「規定モード」⇒「編集」の場合「表示するアイテムがありません」となりますので「新規」に変更します。
- 新規スクリーン（PlaceScreen）の追加
- Bing Maps 地図サービスを利用する。
- 関連
Location関数を使い地図情報をGPSから取得して地図を表示しよう！
既に作成した「作業報告」アプリに、新しい画面「PlaceScreen」を追加して、位置情報を取得します。
まず、基本 位置情報は以下の関数（Location関数）で簡単に取得できます。
緯度・経度は以下の関数で取得できます。
- 緯度：Location.Latitude
- 経度：Location.Longitude
Location関数を、テキストラベルのTextプロパティに設定すると、緯度・経度を表示できます。
- 緯度： Text = Location.latitude
- 経度： Text = Location.longitude
では、「作業報告」アプリの SharePointList 追加修正します。
SharePointListに緯度（Latitude）・経度（Longitude）・場所（Place）を追加します。
| 列名 |
種類 |
| Latitude | 一行テキスト |
| Longitude | 一行テキスト |
| Place | 一行テキスト |
Power Apps に移動します。
PowerApps編集画面
新規スクリーン（PlaceScreen）の追加
「＋新しい画面」⇒「空」のレイアウト
「ツリービュー」の「＋新しい画面」から「空」の画面を追加します。
「画面」名を「PlaceScreen」に変更します。
「挿入」⇒「編集フォーム」と選択します。
まずは、「PlaceScreen」に 「編集フォーム」を「挿入」します。
「挿入」⇒「編集フォーム」と順番に選択します。
「データソース」⇒「WorkCompletionReport」を選択します。
挿入された「編集フォーム」とSharePoint のデータソース「WorkCompletionReport」を接続します。
「編集フォーム」を選択後、右側のフォームの「プロパティ」にある「データソース」が「なし」になっているので、右側の下矢印をクリックして SharePoint の WorkCompletionReport を選択します。
「フィールド」の各項目が表示されます。
「データソース」に「「WorkCompletionReport」が表示されると、左側の「編集フォーム」にフィールドの各項目が表示されます。
「フィールドの編集」をクリックします。
今回不必要な項目を削除します。
不要な「フィールド」を削除後、「Latitude」「Longitude」「Place」のみにします。
- 緯度：latitude
- 経度：longitude
- 場所：Place
3つのみの表示になります。
「DataCardValueXX」選択⇒「詳細設定」⇒「プロパティを変更するためにロックを解除します。」をクリック。
「DataCardValueXX」の Default プロパティ が「Parent.Default」となっているのを、「Location.Latitude」と「Location.longitude」に変更したいのですが、ロックを解除しなければなりません。
「詳細設定」の「プロパティを変更するためにロックを解除します」をクリックします。
Default = Parent.Default ⇒ 「Location.Latitude」と設定しますが、 今回はIf構文で設定します。
位置情報取得は、最初のみにして更新されないようにするために、if構文を利用します。
if構文は以下の様に書きます。
- 緯度（Latitude）
- 「If(IsBlank(Parent.Default)=true,Location.Latitude,Parent.Default)」
- 経度：Longitude
- 「If(IsBlank(Parent.Default)=true,Location.Longitude,Parent.Default)」
DataCardValue26 , DataCardValue27 , DataCardValue28 の各々のDisplayModeを「DisplayMode.View」に変更しておきます。
「緯度・経度・場所」情報は、変更不可にするために、「DisplayMode」を「編集」モードから⇒「ビュー」モードに変更します。
displayMode = DisplayMode.Xiew
この操作を、各々「Latitude_DataCardXX」「Longitude_DataCardXX」「Place_DataCardXX」に行います。
変更不可になります。
この段階で、「アプリのプレビュー」ボタンを押します。
すると、「表示するアイテムがありません」となります。
「Form」のプロパティ⇒「規定モード」⇒「編集」の場合「表示するアイテムがありません」となりますので「新規」に変更します。
「規定モード」を「新規」に変更します。
表示されます。
さらに、地図情報を表示するために「Bing Maps」地図サービスを追加します。
Bing Maps 地図サービスを利用する。
Bing Maps 地図サービスを利用するためには、APIキーを取得する必要があります。
Bing Maps APIキー取得
Bing Maps Dev Center へ行きます。
マイクロソフトアカウントでサインイン後、「My account」の「My Keys」をメモします。
マイクロソフトアカウント「Microsoft Account」 でサインイン「Sign in」します。
マイアカウント「My account」⇒「My Keys」と選択します。
「key:Show key」をクリックすると、「key」が表示されます。
大切なので、メモ帳などにコピーします。
「データの追加」⇒検索欄に「bing maps」と入力し⇒「Bing Maps」を選択します。
「＋接続の追加」を選択します。
メモしてあったAPIキーを入力し「接続」を選択します。
「挿入」⇒「メディア」⇒「画像」と選択します。
Image4のImageプロパティに以下の値を設定します。
まず以下の様に記入すると、補完が表示されます。
imagerySetが地図の種類で、以下ズームレベル、緯度、経度、pinタイプと続きます。
今回はこんな感じです。緯度・経度は「EditScreen」の「DataCardValue10」と「DataCardValue11」を指定します。
さらに、地図サイズ、プッシュピンの位置、ピン止めの形を「Concatenate関数」で文字列連結します。
詳しくは以下を参照してください。
実際にはこんな感じになります。
うまくいくと、地図が表示されます。
DetailScreen1に「地図表示」ボタンを配置して、「Navigate関数」で「PlaceScreen」に画面遷移出来るようにします。
「挿入」⇒「ボタン」
「ボタン」の「Text」プロパティに「地図表示」と入力します。
「ボタン」の「OnSelect」プロパティに「Navigate(PlaceScreen)」と入力します。
PlaceScreenに「戻る」ボタンを配置して、「Back関数」で「前画面」に画面遷移出来るようにします。
「DetailScreen」の「RectQuickActionBar」と「IconBackarrow」と「LblAppName」３つを Ctrlキーで選択しコピーします。
「PlaceScreen」に貼り付けます。
「LblAppName」のテキストを「戻る」に変更し、「Width」プロパティを「100」に変更します。
「IconBackarrow」の「OnSelect」プロパティに「Back()」と入力します。
コメント