次の方法で共有

マップ コンポーネントの実装

  • [アーティクル]

このサンプル コンポーネントは、フォームの住所フィールドを操作する際のユーザー エクスペリエンスを変更します。 住所のテキスト値とともに、このコンポーネントは別のタブや画面に移動せずに地図上で特定の住所を視覚的に識別する機能を提供します。 

マップ コンポーネント。

以下に使用できます

モデル駆動型アプリとキャンバス アプリ

コード

完全なサンプル コンポーネントは、こちら からダウンロードできます。

マニフェスト ファイルで Single line of Text 種類のプロパティを定義します。 これを使用してフォームの住所フィールドにバインドします。 

注意

市販の地図 API はどれでも使用できます。  この例では Google Map API を使用する方法を説明します。 Google Map API にアクセスするにはコンポーネントの API キーを作成する必要があります。  それを生成する手順 (https://developers.google.com/maps/documentation/embed/get-api-key) に従ってください。

コンポーネントのコンテキストでアクセスできる変数名 MAPS_API_KEY を作成します。 Google Map API を使用すると IFRAME にマップを表示することのみ可能です。 そのため、生成した URL を使用して地図を表示する IFRAME 要素を作る必要があります。 既定では、地図を非表示に設定し、住所の値がフォームに存在する場合にのみ表示するようにします。

buildMapUrl および renderMap (ひとつにまとめることもできます) は住所の文字列を受け取り、それをエンコードしてマップ URL に埋め込み、次に IFRAME 要素の src 要素をそれぞれ URL に設定します。 また、notifyOutputChanged メソッドを呼び出して、表示が変更されたことをコンポーネントに通知します。

 public renderMap(mapUrl: string) {
    if (mapUrl) {
      this._iFrameElement.setAttribute("src", mapUrl);
      this._iFrameElement.setAttribute("class", "mapVisibleStyle");
    } else {
      this._iFrameElement.setAttribute("class", "mapHiddenStyle");
    }
    this._notifyOutputChanged();
  }

ビューが更新されるたびにコントロールが更新されるように、必ず updateView 関数から renderMap 関数を呼び出してください。

サンプル コンポーネントをダウンロード
サンプルコンポーネントの使用方法
Power Apps Component Framework API の参照
Power Apps component framework のマニフェスト スキーマ リファレンス

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。