建立包含地址輸入和地圖控制項的應用程式
在許多案例中，都需要使用者在應用程式中輸入地址。 在過去，有多個欄位會擷取地址中的每個元素，其中使用者提供街道位址、市/鎮和郵遞區號，並選取縣/市。 輸入地址會令人沮喪而且容易出錯，尤其是在行動案例中。
地址輸入控制項會在使用者輸入時向使用者提供動態地址建議。 根據模糊比對邏輯，控制項會建議多個可能的相符地址，使用者可以從中選取—讓您更快速、更輕鬆地輸入準確的地址。
該控制項會將地址做為結構化資料傳回，讓應用程式可以擷取如市/鎮、街道、自治區甚至緯度和經度等資訊。 資料的格式適用於許多地區設定和國際地址格式。
若要使用該控制項，您需要為環境啟用地理空間服務。
觀看此影片瞭解如何使用地址輸入控制項：
觀看此影片瞭解如何使用地圖控制項：
在本文中，我們將瞭解如何在畫布應用程式中使用地址輸入控制項。
先決條件
若要完成本課程，您需要包含 Microsoft Dataverse 資料庫的 Power Apps 環境。 如果您沒有授權，則可以註冊 Power Apps 開發人員方案或 Power Apps 試用版。
建立試用環境
Power Apps 中的環境是儲存、管理和共用組織商務資料、應用程式及流程的空間。 它也充當不同應用程式的容器，這些應用程式可能有不同角色、安全性需求或目標對象。
每個環境都可以有一個 Dataverse 資料庫。
為確認您已具備完成此課程所需的一切，我們將建立一個包含 Dataverse 資料庫的新環境。 這是 30 天試用版，將在 30 天後消失，但如果您想保留它，您可以將其升級到沙箱或實際執行環境。
我們將建立包含 Dataverse 資料庫的試用環境，以及此主題中使用的範例資料。
移至網頁瀏覽器中的 Power Platform 系統管理中心。
選取環境。
選取新增。
輸入名稱，例如「Dataverse 試用」。
選取環境類型 試用。
將建立資料庫切換為是。
選取下一步。
將部屬範例應用程式和資料切換為是。
選取儲存。
現在將建立您的試用環境，包括 Dataverse 資料庫和 Dataverse 資料表中的範例資料。
為環境啟用地理空間服務
在可以使用畫布應用程式中的地理空間服務之前，管理員必須為我們想要建立應用程式的環境啟用存取權。
若要瞭解如何在環境中啟用地理空間服務，請參閱為環境啟用地理空間功能。
組建畫布應用程式
我們將先建立應用程式，然後在應用程式中建立要使用的標頭控制項，以標準化不同畫面上的標題外觀和風格。
選取插入 > 新畫面 > 可捲動來新增新畫面。
將標籤文字變更為「新增帳戶」。
選取插入 > 表單 > 編輯，將表單新增至畫面。
即會新增表單 控制項
更新已下表單的屬性：
屬性 值 資料來源 帳戶 資料行 2 DefaultMode FormMode.New選取欄位旁邊的編輯，將其他欄位新增至表單，然後選取已下地址欄位：
- 地址 1：街道 1
- 位址 1：市/鎮
- 地址 1：縣/市
- 地址 1：郵遞區號
- 地址 1：國家/地區
- 地址 1：緯度
- 地址 1：經度
調整欄位順序，如下所示。
地址輸入控制項
在本節中，我們會將地址輸入控制項新增至應用程式。
選取插入 > 輸入 > 位址輸入，將控制項新增至畫面。
將控制項移至畫面的右邊。
設定地址輸入控制項的屬性
在本節中，我們將瞭解並視需要為地址控制項設定各種屬性。 有一些地址輸入控制項特定的屬性。
| 屬性 | 描述 |
|---|---|
| 搜尋結果限制 | 控制項顯示的建議地址數。 在此範例中，我們將其設定為 5，所以搜尋中顯示的地址不會超過五個。 |
| 在半徑內搜索 | 控制項是否應建議使用者定義緯度和經度之半徑中的地址。 在此範例中將其設定為是。 |
| 緯度 | 用於地理偏差地址建議之中心點的緯度。 需要開啟在半徑範圍內搜尋。 在此範例中已將其設定為 Location.Latitude 公式，以傳回目前位置的緯度。 |
| 緯度 | 用於地理偏差地址建議之中心點的經度。 需要開啟在半徑範圍內搜尋。 在此範例中已將其設定為 Location.Longitude 公式，以傳回目前位置的緯度。 |
| 半徑 | 緯度和經度周圍的半徑 (以公尺為單位) 以限制地址建議。 在半徑範圍內搜尋必須設為開啟。 在此範例中將其設定為 100000。 |
| 語言 | 地址建議傳回的語言。 我們已將其保留為預設 - 「英文 (美國)」。 |
| 國家/地區集 | 以 ISO 3166 alpha-2 國碼 (地區碼)，用逗號分隔的國家/地區清單來限制地址建議。 範例：「US」，「FR」，「KW」。 在此範例中將其設定為 US。 |
設定地址輸入控制項的輸出屬性
當使用者在應用程式中與其互動時，該控制項就會輸出各種屬性。 您可以在其他控制項中使用這些輸出，也可以自訂體驗。
下方資料表列出可用的輸出屬性。
| 屬性 | 描述 |
|---|---|
| UserInput | 使用者在輸入方塊中輸入的文字。 |
| SelectedLatitude | 使用者在輸入欄位中所選的地址緯度。 |
| SelectedLongitude | 使用者在輸入欄位中所選的地址經度。 |
| SearchResultJson | 以 JSON 格式中的字串形式顯示的搜尋結果 (基於 UserInput 屬性)。 |
| FreeformAddress | 建議地址清單中的選取地址。 |
| LocalName | 代表地理區域或地區名稱的地址控制項，該名稱將多個可定址物件分組以用於定址目的，而無需成為管理單位。 |
| PostalCode | 郵遞區號。 |
| ExtendedPostalCode | 擴充郵遞區號。 |
| CountryCode | 國碼 (地區碼)。 |
| 國家/地區 | 國家/地區。 |
| CountryCodeISO3 | 以 ISO Alpha-3 格式表示的國碼 (地區碼)。 |
| CountrySubdivisionName | 國家/地區細分名稱。 |
| StreetName | 路/街名稱。 |
| StreetNumber | 路/街號碼。 |
| 市 | 市。 |
| MunicipalitySubdivision | 市細分。 |
| CountryTertiarySubdivision | 國家/地區第三級細分。 |
| CountrySecondarySubdivision | 國家/地區第二級細分。 |
| CountrySubdivision | 國家/地區細分。 |
當您執行應用程式並開始輸入地址時，它會顯示符合輸入值，且位於目前位置 100,000 公尺以內的地址。 請注意，當您開始輸入地址時，它一次不會顯示超過五個地址建議。
使用上述控制項擷取表單地址欄位中位址，以建立新的帳戶。 此步驟非常實用，因此使用者不必單獨輸入每個地址元素。
我們將從地址輸入中將資料卡的值設為適當屬性值。
提示
您可能會鎖定資料卡的預設值。 若要解除鎖定，請選取資料卡並移至進階屬性，然後選取解除鎖定來變更屬性。
| 資料卡 | 值 |
|---|---|
| 地址 1：街道 1 | AddressInput1.StreetNumber & " " & AddressInput1.StreetName |
| 位址 1：市/鎮 | AddressInput1.Municipality |
| 地址 1: 縣/市 | AddressInput1.CountrySubdivision |
| 地址 1：郵遞區號 | AddressInput1.PostalCode |
| 地址 1：國家/地區資料卡 | AddressInput1.Country |
| 地址 1：緯度 | AddressInput1.SelectedLatitude |
| 地址 1：經度 | AddressInput1.SelectedLongitude |
位址 1：街道 1 資料卡的範例：
當在地址輸入控制項中選取地址時，表單會填入所有的位址欄位。
地圖控制項
在本節中，我們將瞭解如何在應用程式上新增地圖控制項，以在地圖上顯示選取的位置。
在新增地圖控制項之前，我們需要建立集合以從地址輸入擷取地址 – 此集合將當做地圖的資料來源。
在地址輸入控制項的 OnAddressSelect 屬性中，輸入以下公式以建立可擷取地址資料的集合。
ClearCollect( colSelectedAddress, { Street: AddressInput1.StreetNumber & " " & AddressInput1.StreetName, City: AddressInput1.Municipality, State: AddressInput1.CountrySubdivision, Zip: AddressInput1.PostalCode, Country: AddressInput1.Country, Latitude: AddressInput1.SelectedLatitude, Longitude: AddressInput1.SelectedLongitude } )
選取地址輸入控制項以外的區域，然後選取插入 > 媒體 > 地圖，將地圖控制項新增至畫面。
選取集合做為資料來源。
將地圖移至地址輸入區段下方。
設定地圖控制項的屬性
在本節中，我們將瞭解並視需要為地圖控制項設定各種屬性。
下表列出可用的屬性。
| 屬性 | 描述 |
|---|---|
| Data source(Items) | 資料來源 (資料表)，列出預先定義的一組經度和緯度，在載入時，會在地圖上顯示為地圖釘。 使用 ItemAddresses、ItemLongitudes、ItemLatitudes 和 ItemLabels 來對應資料中的每一欄。 |
| 使用預設位置 | 地圖是否會在使用者設定的預設位置進行初始化。 |
| 預設經度 | 若已啟用使用預設位置，則在載入地圖時，地圖將會移至的經度。 |
| 預設緯度 | 若已啟用使用預設位置，則在載入地圖時，地圖將會移至的緯度。 |
| 預設縮放等級 | 若已啟用使用預設位置，則在載入地圖時，地圖將會移至的縮放等級。 |
| 顯示目前位置 | 地圖是否應顯示使用者目前的位置。 |
| 目前位置緯度 | 如果啟用顯示目前位置，則會顯示使用者目前位置的緯度。 |
| 目前位置經度 | 如果啟用顯示目前位置，則會顯示使用者目前位置的經度。 |
| 衛星檢視 | 地圖的樣式是衛星檢視表或道路檢視表。 |
| 叢集釘選 | 地圖釘是否已叢集。 |
| Zoom 控制項 | Zoom 控制項是否顯示在地圖上。 |
| Compass 控制項 | Compass 控制項是否顯示在地圖上。 |
| Pitch 控制項 | Pitch 控制項是否顯示在地圖上。 |
| 圖釘色彩 | 圖釘的色彩。 |
| ItemsLabels | Items 中的欄，其中的字串要做為圖釘的標籤。 |
| ItemsAddresses | Items 中的欄，其中有代表圖釘位置的字串。 |
| ItemsLongitudes | 資料來源中的表格欄名稱，其中包含表示圖釘經度位置的浮點數。 |
| ItemsLatitudes | 資料來源中的表格欄名稱，其中包含表示圖釘緯度位置的浮點數。 |
| ItemsColors | 圖釘的色彩。 |
| ItemsIcons | 圖釘的圖示。 |
| 項目 | 資料來源中的資料表名稱，其中包含您要使用圖釘在地圖中繪製的所有記錄。 每一列都必須有每一列的標籤、經度和緯度的項目。 |
| OnMapClick | 選取任何位置時地圖的回應方式。 |
| OnSelect | 選取地圖圖釘時，應用程式的回應方式。 |
| OnLoad | 地圖載入完成後應用程式的回應方式。 |
| OnItemsChange | 地圖圖釘變更時，應用程式的回應方式。 |
| 顯示資訊卡 | 資訊卡是否顯示在地圖圖釘上。 |
| 顯示圖形 | Shapes_Items 中的形狀是否出現在地圖上。 |
| 顯示圖形標籤 | 標籤是否出現在地圖的圖形上。 |
| 啟用圖形繪製 | 繪製工具控制項是否顯示在地圖上。 |
| 啟用圖形刪除和標籤編輯 | 是否可以刪除圖形，及其標籤是否可以在地圖上編輯。 |
| Shapes_Items | 資料來源中的資料表名稱，其中包含您希望在地圖中顯示為圖形之 GeoJSON 物件的所有記錄。 |
| ShapeGeoJSONObjects | 資料來源中資料表的資料列名稱，其中包含表示圖形 GeoJSON 物件的字串。 |
| ShapeLabels | Shapes_Items 中的資料列，其中包含要做為圖形標籤的字串。 |
| ShapeColors | 圖形的色彩。 |
| OnShapeSelected | 選取地圖上的圖形時，應用程式的回應方式。 |
| OnShapeCreated | 建立地圖上的圖形時，應用程式的回應方式。 |
| OnShapeEdited | 編輯地圖上的圖形時，應用程式的回應方式。 |
| OnShapeDeleted | 刪除地圖上的圖形時，應用程式的回應方式。 |
設定地圖控制項的輸出屬性
當使用者在應用程式中與其互動時，該地圖控制項就會輸出各種屬性。 您可以在其他控制項中使用這些輸出，也可以自訂體驗。
下方資料表列出可用的輸出屬性。
| 屬性 | 描述 |
|---|---|
| CenterLocation | 地圖的中心位置為 .Latitude 或 .Longitude。 輸出將是整數。 例如，呼叫 Map1.CenterLocation.Latitude 將輸出一個整數，例如「47.60357」。 |
| 已選取 | 地圖上選取的圖釘。 |
| SelectedItems | 地圖上所選叢集的一個或多個所選圖釘。 |
| GeocodedItems | 地圖上圖釘的地理編碼位置。 |
| ClickedLocation | 在地圖上最後點選的位置為 .Latitude 或 .Longitude。 |
| Shapes_Selected | Shapes_Items 中所選圖形的記錄。 |
| Shapes_SelectedItems | Shapes_Items 中所選的重疊圖形的記錄。 |
| SelectedShape | 在地圖上具有 .Perimeter 和 .Area 的所選圖形。 |
| DeletedShape | 在地圖上具有 .Perimeter 和 .Area 的最後刪除圖形。 |
| GeoJSON | 地圖上以 GeoJSON 功能集合格式顯示的圖形清單。 |
要在地址輸入中輸入的地址上放置圖釘，我們會使用 OnAddressSelect 屬性上建立的集合，並在地圖控制項中使用它。
| 屬性 | 值 |
|---|---|
| 項目 | colSelectedAddress |
| ItemsLatitudes | colSelectedAddress.Latitude |
| ItemsLongitude | colSelectedAddress.Longitude |
每個位置圖釘可以自訂一些圖釘屬性，如下所述：
ItemsColors - 若要將圖釘的顏色更新為每個位置的不同顏色，請將資料行新增至集合 Color: Red，並在地圖控制項的 ItemsColors 資料屬性中使用。
ItemsLabels - 要將圖釘的標籤更新為顯示每個位置地址的不同標籤，請將資料行新增至集合 Label:AddressInput1.FreeformAddress，並在地圖控制項的 ItemsLabels 資料屬性中使用。
ItemsIcons - 若要變更每個位置的圖釘圖示，請將資料行新增至集合，並在地圖控制項的 ItemsIcons 資料屬性中使用。 在此範例中，我們將新增三角形圖示，公式為
Icon: triangle。提示
如需圖示的完整清單，請移至影像範本清單。
ClearCollect( colSelectedAddress, { Street: AddressInput1.StreetNumber & " " & AddressInput1.StreetName, City: AddressInput1.Municipality, State: AddressInput1.CountrySubdivision, Zip: AddressInput1.PostalCode, Country: AddressInput1.Country, Latitude: AddressInput1.SelectedLatitude, Longitude: AddressInput1.SelectedLongitude, Label: AddressInput1.FreeformAddress, Color: Red, Icon: Triangle } );
將這些屬性新增至集合之後，請移至地圖控制項的進階索引標籤，然後更新 ItemsColors、ItemsLabels 和 ItemsIcons 屬性。
在預覽模式中執行應用程式進行測試。 地圖會用三角形圖示顯示在 [地址輸入] 中選取的位置，而且該地址在地圖上顯示為標籤。
