Criar um aplicativo com controles de entrada de endereço e mapa

Existem muitos cenários em que se espera que os usuários insiram endereços em um aplicativo. Historicamente, existem vários campos que capturam cada elemento de um endereço, onde o usuário fornece o endereço, a cidade e o código postal, e seleciona o estado. A inserção de endereços pode ser frustrante e propensa a erros, principalmente em cenários móveis.

O controle Entrada de endereço apresenta ao usuário sugestões de endereço dinâmicas à medida que ele digita. Usando a lógica da correspondência difusa, o controle sugere várias correspondências de endereços potenciais a partir das quais o usuário poderá fazer uma seleção — tornando mais rápido e fácil inserir endereços precisos.

O controle retorna o endereço na forma de dados estruturados, permitindo ao aplicativo extrair informações como cidade, rua, município e até latitude e longitude. Os dados estão em um formato amigável para muitos códigos de idioma e formatos de endereços internacionais.

Para usar o controle, você precisará habilitar os Serviços Geoespaciais para o ambiente.

• Assista a este vídeo para saber como usar o controle Entrada de endereço:

• Assista a este vídeo para saber como usar o controle de mapa:

Neste artigo, saberemos como usar o controle Entrada de endereço em aplicativos de tela.

Pré-requisitos

Para concluir esta lição, você precisará de um ambiente do Power Apps com um banco de dados do Microsoft Dataverse. Se ainda não tiver uma licença, você poderá se inscrever para obter o Plano para Desenvolvedores do Power Apps ou use uma avaliação do Power Apps.

Criar um ambiente de avaliação

Um ambiente no Power Apps é um espaço para armazenar, gerenciar e compartilhar dados corporativos, aplicativos, chatbots e fluxos da sua organização. Ele também serve como um contêiner para separar aplicativos que talvez tenham funções, requisitos de segurança ou públicos-alvo diferentes.

Cada ambiente pode ter uma base de dados do Dataverse.

Para ter certeza de que você tem o que precisa para concluir esta lição, vamos criar um novo ambiente que inclui um banco de dados do Dataverse. Esta é uma avaliação de 30 dias que desaparecerá no final dos 30 dias, mas você poderá atualizá-lo para um ambiente de área restrita ou produção se quiser mantê-la.

Vamos criar um ambiente de avaliação que incluirá um banco de dados do Dataverse e os dados de exemplo usados neste tópico.

1. Acesse o centro de administração do Power Platform em um navegador da Web.

2. Selecione Ambientes.

3. Selecione Nova.

4. Insira um nome, por exemplo, "Avaliação do Dataverse".

5. Selecione Avaliação para o tipo de ambiente.

6. Alterne Criar Banco de Dados para Sim.

7. Selecione Avançar.

   

8. Alterne Implantar Aplicativos e Dados de Exemplo para Sim.

9. Selecione Salvar.

Seu ambiente de teste será criado, incluindo um banco de dados e dados de exemplo do Dataverse em tabelas do Dataverse.

Habilitar os Serviços Geoespaciais para o ambiente

Antes de podermos usar os Serviços Geoespaciais em aplicativos de tela, um administrador deverá permitir o acesso aos recursos para o ambiente onde queremos criar o aplicativo.

Para saber como habilitar Serviços geoespaciais em seu ambiente, veja Habilitar os recursos geoespaciais para o ambiente.

Criar um aplicativo de tela

Começaremos com a criação de um aplicativo e, em seguida, criaremos um controle de cabeçalho a ser usado no aplicativo para padronizar a aparência do cabeçalho em diferentes telas.

1. Crie um aplicativo de tela em branco no ambiente que você criou anteriormente.

2. Selecione Inserir > Nova Tela > Rolável para adicionar uma nova tela.

   

3. Altere o texto do rótulo para "Nova Conta".

   

4. Selecione Inserir > Formulários > Editar para adicionar um formulário à tela.

   

   O controle de formulário é adicionado

   

5. Atualize as seguintes propriedades do formulário:

   Propriedade	Valor
   Fonte de dados	Contas
   Colunas	2
   DefaultMode	FormMode.New

6. Selecione Editar ao lado dos campos para adicionar mais campos ao formulário e selecione os seguintes campos de endereço:

   • Endereço 1: Rua 1
   • Endereço 1: Cidade
   • Endereço 1: Estado
   • Endereço 1: CEP/Código Postal
   • Endereço 1: País/Região
   • Endereço 1: Latitude
   • Endereço 1: Longitude

   

7. Ajuste a ordem dos campos conforme mostrado abaixo.

   

Controle Entrada de endereço

Nesta seção, adicionaremos o controle Entrada de endereço ao aplicativo.

1. Selecione Inserir > Entrada > Entrada de endereço para adicionar o controle à tela.

   

2. Mova o controle para o lado superior direito da tela.

   

Configurar propriedades para o controle Entrada de endereço

Nesta seção, revisaremos e, se necessário, definiremos várias propriedades do controle de endereço. Existem algumas propriedades específicas do controle Entrada de endereço.

Propriedade	Descrição
Limite de resultados da pesquisa	O número de endereços sugeridos que o controle exibe. Definimos como 5 neste exemplo e, portanto, não mais do que cinco endereços aparecerão na pesquisa.
Pesquisar dentro do raio	Se o controle tiver de sugerir endereços no Raio definido pelo usuário da Latitude e Longitude. Nós o configuramos como Sim neste exemplo.
Latitude	A latitude do ponto central usada para polarizar sugestões de endereço. Requer que Pesquisar dentro do raio esteja ativada. Nós o configuramos como a fórmula Location.Latitude neste exemplo para retornar a latitude da localização atual.
Longitude	A longitude do ponto central usada para polarizar sugestões de endereço. Requer que Pesquisar dentro do raio esteja ativada. Nós o configuramos como a fórmula Location.Longitude neste exemplo para retornar a latitude da localização atual.
Raio	O raio, em metros, em torno da Latitude e Longitude para restringir as sugestões de endereço. Requer que Pesquisar dentro do raio esteja Ativado. Nós o configuramos como 100000 neste exemplo.
Idioma	O idioma em que as sugestões de endereço são retornadas. Deixamos com o padrão – "Inglês (Estados Unidos)".
Conjunto de países	Lista de países/regiões separados por vírgula para restringir as sugestões de endereço, nos códigos de país ISO 3166 alfa-2. Exemplos: "US", "FR", "KW". Nós o configuramos como US neste exemplo.

Configurar propriedades de saída para o controle Entrada de endereço

O controle produz como saída várias propriedades quando um usuário interage com ele dentro de um aplicativo. Você pode usar essas saídas em outros controles ou para personalizar a experiência.

A tabela a seguir lista as propriedades de saída disponíveis.

Propriedade	Descrição
UserInput	Texto digitado pelo usuário na caixa de entrada.
SelectedLatitude	Latitude do endereço do usuário selecionado no campo de entrada.
SelectedLongitude	Longitude do endereço do usuário selecionado no campo de entrada.
SearchResultJson	O resultado da pesquisa (com base na propriedade UserInput), exibido como uma cadeia de caracteres no formato JSON.
FreeformAddress	Endereço selecionado na lista de endereços sugeridos.
LocalName	Um controle de endereço que representa o nome de uma área ou localidade que agrupa vários objetos endereçáveis para fins de endereçamento, sem ser uma unidade administrativa. Este campo é usado para criar a propriedade 'freeformAddress'.
PostalCode	CEP.
ExtendedPostalCode	CEP estendido.
CountryCode	Código do país.
País/Região	País.
CountryCodeISO3	Código do país no formato ISO alfa-3.
CountrySubdivisionName	Nome da subdivisão do país.
StreetName	Nome da rua.
StreetNumber	Número da rua.
Município	Município.
MunicipalitySubdivision	Subdivisão de município.
CountryTertiarySubdivision	Subdivisão terciária de país.
CountrySecondarySubdivision	Subdivisão secundária de país.
CountrySubdivision	Subdivisão do país.

Quando você executa o aplicativo e começa a digitar um endereço, ele mostrará os endereços correspondentes ao valor inserido e localizados a apenas 100.000 metros da localização atual. Além disso, observe que ele não mostra mais de cinco sugestões de endereço por vez quando você começa a digitar o endereço.

Usando o controle acima, capturaremos o endereço nos campos de endereço do formulário para criar uma nova conta. Esta etapa é útil para que o usuário não precise digitar cada um dos elementos de endereço individualmente.

Vamos definir os valores do cartão de dados para o valor de propriedade apropriado da entrada de endereço.

Dica

Os valores padrão do cartão de dados podem estar bloqueados. Para desbloqueá-los, selecione o cartão de dados e acesse Propriedades avançadas e, em seguida, selecione Desbloquear para alterar propriedades.

Cartão de dados	Valor
Endereço 1: Rua 1	AddressInput1.StreetNumber & " " & AddressInput1.StreetName
Endereço 1: Cidade	AddressInput1.Municipality
Endereço 1: Estado	AddressInput1.CountrySubdivision
Endereço 1: CEP/Código Postal	AddressInput1.PostalCode
Cartão de dados Endereço 1: País/Região	AddressInput1.Country
Endereço 1: Latitude	AddressInput1.SelectedLatitude
Endereço 1: Longitude	AddressInput1.SelectedLongitude

Exemplo para o cartão de dados Endereço 1: Rua 1:

O formulário é preenchido com todos os campos de endereço quando um endereço é selecionado no controle Entrada de endereço.

Controle de mapa

Nesta seção, veremos como adicionar o controle Mapa ao aplicativo para mostrar o local selecionado no mapa.

1. Antes de adicionar o controle Mapa, precisamos criar uma coleção para capturar o endereço da entrada de endereço – essa coleção será usada como a fonte de dados para o mapa.

   Na propriedade OnAddressSelect do controle Entrada de endereço, insira a fórmula a seguir para criar uma coleção que capture os dados de endereço.

   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
       }
   )
   

   

2. Selecione uma área fora do controle Entrada de endereço e selecione Inserir > Mídia > Mapa para adicionar o controle de mapeamento à tela.

   

3. Selecione a coleção como a fonte de dados.

   

4. Mova o mapa para baixo da seção de entrada de endereço.

   

Configurar propriedades para o controle Mapa

Nesta seção, revisaremos e, se necessário, definiremos várias propriedades do controle de mapeamento.

A tabela a seguir lista as propriedades disponíveis.

Propriedade	Descrição
Fonte de dados (Itens)	Fonte de dados (tabela) que lista um conjunto predefinido de longitudes e latitudes a serem exibidas como marcador no mapa quando ele é carregado. Mapeie cada uma das colunas em seus dados usando ItemAddresses, ItemLongitudes, ItemLatitudes e ItemLabels.
Usar localização padrão	Se o mapa for inicializado em um local padrão definido pelo usuário.
Longitude padrão	Longitude para a qual o mapa chegaria quando fosse carregado, se Usar local padrão estiver ativado.
Latitude padrão	Latitude para a qual o mapa chegaria quando fosse carregada, se Usar local padrão estiver ativado.
Nível de zoom padrão	Nível de zoom para a qual o mapa seria definido quando fosse carregado, se Usar local padrão estiver ativado.
Mostrar localização atual	Se o mapa deve exibir a localização atual do usuário.
Latitude do local atual	A latitude da localização atual do usuário se Mostrar localização atual estiver ativado.
Longitude do local atual	A longitude da localização atual do usuário se Mostrar localização atual estiver ativado.
Exibição satélite	Se o estilo do mapa é uma exibição de satélite ou de estrada.
Marcadores do cluster	Se os marcadores do mapa estão agrupados.
Controle de zoom	Se o controle de zoom aparece no mapa.
Controle da bússola	Se o controle de bússola aparece no mapa.
Controle de rotação sobre o eixo X	Se o controle de inclinação aparece no mapa.
Cor do marcador	A cor dos marcadores.
ItemsLabels	Uma coluna em Itens com as cadeias de caracteres que você deseja usar como etiquetas para os marcadores.
ItemsAddresses	Uma coluna em Itens com as cadeias de caracteres que representam a localização dos pinos.
ItemsLongitudes	Nome da coluna na tabela em sua fonte de dados com números de ponto flutuante que representam a posição de longitude dos marcadores.
ItemsLatitudes	Nome da coluna na tabela em sua fonte de dados com números de ponto flutuante que representam a posição da latitude dos marcadores.
ItemsColors	Cor dos pinos.
ItemsIcons	Ícone dos pinos.
Itens	Nome da tabela em sua fonte de dados que contém todos os registros que você deseja plotar no mapa usando marcadores. Cada linha deve ter uma entrada para o rótulo, longitude e latitude para cada linha.
OnMapClick	Como o mapa responde quando qualquer local está selecionado.
OnSelect	Como o aplicativo responde quando uma marcação de mapa é selecionada.
OnLoad	Como o aplicativo responde quando o mapa termina de ser carregado.
OnItemsChange	Como o aplicativo responde quando marcações de mapa mudam.
Mostrar cartões de informações	Se os cartões informativos aparecem nos pinos do mapa.
Mostrar formas	Se as formas em Shapes_Items aparecem no mapa.
Mostrar rótulos de forma	Se os rótulos aparecem nas formas do mapa.
Habilitar desenho de forma	Se o controle de ferramentas de desenho aparece no mapa.
Habilitar a edição de rótulos e a exclusão de formas	Se as formas podem ser excluídas e seus rótulos podem ser editados no mapa.
Shapes_Items	Nome da tabela em sua fonte de dados que contém todos os registros com os objetos GeoJSON que você deseja mostrar no mapa como formas.
ShapeGeoJSONObjects	Nome da coluna na tabela na fonte de dados com cadeias de caracteres que representam os objetos GeoJSON das formas.
ShapeLabels	Uma coluna em Shapes_Items com as cadeias de caracteres que você deseja usar como rótulos para as formas.
ShapeColors	Cor das formas.
OnShapeSelected	Como o aplicativo responde quando uma forma é selecionada no mapa.
OnShapeCreated	Como o aplicativo responde quando uma forma é criada no mapa.
OnShapeEdited	Como o aplicativo responde quando uma forma é editada no mapa.
OnShapeDeleted	Como o aplicativo responde quando uma forma é excluída do mapa.

Configurar propriedades de saída para o controle Mapa

O controle Mapa produz como saída várias propriedades quando um usuário interage com ele dentro de um aplicativo. Você pode usar essas saídas em outros controles ou para personalizar a experiência.

A tabela a seguir lista as propriedades de saída disponíveis.

Propriedade	Descrição
CenterLocation	Local do centro do mapa como .Latitude ou .Longitude. A saída será um inteiro. Por exemplo, chamar Map1.CenterLocation.Latitude produzirá como saída um único inteiro, como "47,60357".
Selecionado(s)	A marcação selecionada no mapa.
SelectedItems	As marcações selecionadas do cluster selecionado no mapa.
GeocodedItems	As localizações geocodificadas dos pinos no mapa.
ClickedLocation	A última localização clicada no mapa como .Latitude ou .Longitude.
Shapes_Selected	O registro da forma selecionada de Shapes_Items.
Shapes_SelectedItems	Os registros das formas sobrepostas selecionadas de Shapes_Items.
SelectedShape	A forma selecionada no mapa com .Perimeter e .Area.
DeletedShape	A última forma excluída no mapa com .Perimeter e .Area.
GeoJSON	A lista de formas no mapa no formato GeoJSON da coleção de recursos.

Para inserir um pino no endereço inserido na entrada de endereço, usaremos a coleção que criamos na propriedade OnAddressSelect no controle de mapeamento.

Propriedade	Valor
Itens	colSelectedAddress
ItemsLatitudes	colSelectedAddress.Latitude
ItemsLongitude	colSelectedAddress.Longitude

Algumas das propriedades do pino podem ser personalizadas por pino de localização e são explicadas abaixo:

1. ItemsColors – para atualizar a cor do pino para uma cor diferente para cada local, adicione uma coluna à coleção Color: Red e use isso na propriedade de dados ItemsColors do controle Mapa.

2. ItemsLabels – para atualizar o rótulo do pino para um rótulo diferente que mostre o endereço de cada local, adicione uma coluna à coleção Label:AddressInput1.FreeformAddress e use isso na propriedade de dados ItemsLabels do controle Mapa.

3. ItemsIcons – para alterar o ícone do pino para cada local, adicione uma coluna à coleção e use-a na propriedade de dados ItemsIcons do controle Mapa. Neste exemplo, adicionaremos um ícone de triângulo com a fórmula como Icon: triangle.

   Dica

   Para a lista completa de ícones, acesse Lista de modelos de imagem.

   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
       }
   );
   

Depois de adicioná-los à coleção, acesse a guia Avançado do controle Mapa e atualize as propriedades ItemsColors, ItemsLabels e ItemsIcons.

Execute o aplicativo no modo de versão preliminar para testá-lo. O mapa mostra a localização selecionada na entrada de endereço com um ícone de triângulo e o endereço aparece como um rótulo no mapa.

Confira também

Controle de mapeamento interativo