Partilhar via


Criar uma aplicação com controlos Entrada de endereço e Mapa

Há muitos cenários em que se espera que os utilizadores introduzam endereços numa aplicação. Historicamente, tem havido vários campos que capturam cada elemento de um endereço onde o utilizador fornece o endereço de rua, cidade e o código postal e seleciona estado. Introduzir endereços pode ser frustrante e propenso a erros, particularmente em cenários móveis.

O controlo Entrada de endereço apresenta ao utilizador sugestões de endereço dinâmicas à medida que escreve. Utilizando uma lógica de correspondência aproximada, o controlo sugere múltiplas correspondências de endereços potenciais a partir das quais o utilizador pode selecionar—facilitando e agilizando a introdução de endereços precisos.

O controlo devolve o endereço como dados estruturados, permitindo que a aplicação extraia informações como cidade, rua, município e até latitude e longitude. Os dados estão num formato amigável para muitos locais e formatos de endereços internacionais.

Para utilizar o controlo, é necessário ativar os Serviços Geoespaciais para o ambiente.

  • Veja este vídeo para aprender a usar o controlo Entrada de endereço:

  • Veja este vídeo para aprender a usar o controlo Mapa:

Neste artigo, iremos aprender a usar o controlo Entrada de endereço em aplicações de tela.

Pré-requisitos

Para completar esta lição, vai precisar de um ambiente do Power Apps com uma base de dados do Microsoft Dataverse. Se não tiver uma licença, pode inscrever-se no Plano de Programador do Power Apps ou utilizar uma avaliação do Power Apps.

Criar um ambiente de avaliação

Um ambiente em Power Apps é um espaço para armazenar, gerir e partilhar os dados de negócio, as aplicações, chatbots e os fluxos da sua organização. Também serve como um recipiente para aplicações separadas que podem ter diferentes funções, requisitos de segurança ou públicos alvo.

Cada ambiente pode ter uma base de dados Dataverse.

Para garantir que tem aquilo de que precisa para concluir esta lição, vamos criar um novo ambiente que inclua uma base de dados Dataverse. Esta é uma avaliação de 30 dias que irá terminal no final dos 30 dias, mas pode atualizá-la para um sandbox ou ambiente de produção se quiser mantê-la.

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

  1. Vá ao centro de administração do Power Platform num browser Web.

  2. Selecionar Ambientes.

  3. Selecione Novo.

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

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

  6. Altere Criar Base de Dados para Sim.

  7. Selecione Seguinte.

    Criar um ambiente de avaliação.

  8. Altere Implementar aplicações e dados de exemplo para Sim.

  9. Selecione Guardar.

O seu ambiente de avaliação será agora criado, incluindo uma base de dados do Dataverse e dados de exemplo em tabelas do Dataverse.

Ativar os Serviços Geoespaciais para o ambiente

Antes de podermos utilizar os Serviços Geoespaciais em aplicações de tela, um admin tem de ativar o acesso às funcionalidades para o ambiente onde queremos criar a aplicação.

Para saber como ativar os Serviços geoespaciais no seu ambiente, consulte Ativar as funcionalidades geoespaciais para o ambiente.

Criar uma aplicação de tela

Iremos começar com a criação de uma aplicação e, em seguida, vamos criar um controlo Header para usar dentro da aplicação para padronizar o aspeto e a funcionalidade do cabeçalho em diferentes ecrãs.

  1. Crie uma aplicação de tela em branco no ambiente que criou anteriormente.

  2. Selecione Inserir > Novo ecrã > Deslocável para adicionar um novo ecrã.

    Selecionar Deslocável.

  3. Altere o texto da etiqueta para "Nova Conta".

    Cabeçalho

  4. Selecione Inserir > Formulários > Editar para adicionar um formulário ao ecrã.

    Selecionar Editar

    O controlo Formulário é adicionado

    Controlo Formulário é adicionado

  5. Atualize as propriedades seguintes do formulário:

    Propriedade Value
    Data source Accounts
    Columns 2
    DefaultMode FormMode.New
  6. Selecione Editar ao lado de campos para adicionar mais campos ao formulário e selecione os seguintes campos de endereço:

    • Endereço 1: Rua 1
    • Endereço 1: Localidade
    • Endereço 1: Distrito
    • Endereço 1: Código Postal
    • Endereço 1: País/Região
    • Endereço 1: Latitude
    • Endereço 1: Longitude

    Propriedades do endereço

  7. Ajuste a ordem dos campos, como mostrado abaixo.

    Nome da Conta e Telefone Principal na primeira fila, Endereço 1: Rua 1 e Endereço 1: Cidade na segunda linha, Endereço 1: Distrito e Endereço 1: Código Postal na terceira linha, Endereço 1: País/Região e Endereço 1: Latitude na quarta linha, Endereço 1: Longitude na quinta linha.

controlo Entrada de endereço

Nesta secção, adicionaremos o controlo Entrada de endereço à aplicação.

  1. Selecione Inserir > Entrada > Entrada de endereço para adicionar o controlo ao ecrã.

    Selecionar o controlo Entrada de endereço

  2. Mova o controlo para o canto superior direito do ecrã.

    A caixa de entrada de endereço é adicionada

Configurar propriedades para o controlo Entrada de endereço

Nesta secção, vamos rever e, se necessário, definir várias propriedades do controlo Address. Existem algumas propriedades específicas do controlo Entrada de endereço.

Controlos Entrada de endereço

Propriedade Descrição
Limite de resultados da pesquisa O número de endereços sugeridos que o controlo apresenta. Definimos como 5 neste exemplo, por isso, não mais do que cinco endereços aparecerão na pesquisa.
Procurar no raio Se o controlo deve sugerir endereços dentro do Raio definido pelo utilizador da Latitude e Longitude. Definimo-lo como Sim neste exemplo.
Latitude A latitude do ponto central usada para geo-desvio das sugestões de endereço. Requer que a Pesquisa no raio esteja ligada. Definimo-lo na fórmula Location.Latitude neste exemplo para obter a latitude da localização atual.
Longitude A longitude do ponto central usada para geo-desvio das sugestões de endereço. Requer que a Pesquisa no raio esteja ligada. Definimo-lo na fórmula Location.Longitude neste exemplo para obter a latitude da localização atual.
Raio O raio, em metros, à volta de Latitude e Longitude para conter as sugestões de endereço. Requer que a Pesquisa no raio esteja Ativada. Definimo-lo como 100000 neste exemplo.
Linguagem O idioma em que as sugestões de endereço são devolvidas. Deixámo-lo com o predefinido – "Inglês (Estados Unidos)".
Country set Lista de países/regiões separados por vírgula para limitar as sugestões de endereços a, nos indicativos alfa-2 da ISO 3166. Exemplos: "EUA", "FR", "KW". Definimo-lo como EUA neste exemplo.

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

O controlo produz várias propriedades quando um utilizador interage com ele dentro de uma aplicação. Pode utilizar estas saídas noutros controlos ou para personalizar a experiência.

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

Propriedade Descrição
UserInput Texto que o utilizador introduziu na caixa de entrada.
SelectedLatitude Latitude do endereço selecionado pelo utilizador no campo de entrada.
SelectedLongitude Longitude do endereço selecionado pelo utilizador no campo de entrada.
SearchResultJson O resultado da pesquisa (baseado na propriedade UserInput), apresentado como uma cadeia no formato JSON.
FreeformAddress Endereço selecionado da lista de endereços sugeridos.
LocalName Um controlo Address que representa o nome de uma área geográfica ou localidade que agrupa vários objetos endereçados para fins de endereçamento, sem ser uma unidade administrativa.
PostalCode Código postal.
ExtendedPostalCode Código Postal Expandido.
CountryCode Indicativo.
País/Região País/Região.
CountryCodeISO3 Indicativo no formato ISO alpha-3.
CountrySubdivisionName Nome da subdivisão do país/região.
StreetName Nome da rua.
StreetNumber Número da rua.
Município Município.
MunicipalitySubdivision Subdivisão municipal.
CountryTertiarySubdivision Subdivisão terciária do país/região.
CountrySecondarySubdivision Subdivisão secundária do país/região.
CountrySubdivision Subdivisão do país/região.

Quando executar a aplicação e começar a escrever um endereço, ele mostrará endereços que correspondem ao valor introduzido e estão localizados apenas dentro de 100.000 metros da localização atual. Além disso, note que não mostra mais do que cinco sugestões de endereços de cada vez quando começa a escrever o endereço.

Entrada do endereço

Utilizando o controlo acima, iremos capturar o endereço nos campos de endereço do formulário para criar uma nova conta. Este passo é útil para que o utilizador não tenha de escrever individualmente cada um dos elementos do endereço.

Definiremos os valores do cartão de dados para o valor da propriedade apropriada a partir da entrada de endereço.

Dica

Os valores predefinidos do cartão de dados podem ser bloqueados. Para os desbloquear, selecione o cartão de dados e vá a Propriedades avançadas e, em seguida, selecione Desbloquear para alterar propriedades.

Unlock the control

Cartão de dados Value
Endereço 1: Rua 1 AddressInput1.StreetNumber & " " & AddressInput1.StreetName
Endereço 1: Localidade AddressInput1.Municipality
Endereço 1: Distrito AddressInput1.CountrySubdivision
Endereço 1: Código Postal AddressInput1.PostalCode
Endereço 1: Cartão de dados de 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:

Fórmula do endereço

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

Formulário final

Controlo Mapa

Nesta secção, iremos ver como adicionar o controlo Mapa na aplicação para mostrar a localização selecionada no mapa.

  1. Antes de adicionar o controlo Mapa, precisamos de criar uma coleção para capturar o endereço a partir da entrada de endereços – esta coleção será usada como a origem de dados para o mapa.

    Na propriedade OnAddressSelect do controlo Entrada de endereço, introduza a seguinte fórmula para criar uma coleção que capture os dados do 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
        }
    )
    

    Fórmula do controlo Mapa

  2. Selecione uma área fora do controlo Entrada de endereço e selecione Inserir > Suporte de Dados > Mapa para adicionar o controlo Mapa ao ecrã.

    Selecionar mapa

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

    Selecionar o controlo

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

    Colocar o mapa no ecrã

Configurar propriedades para o controlo Mapa

Nesta secção, vamos rever e, se necessário, definir várias propriedades do controlo Mapa.

A tabela seguinte lista as propriedades disponíveis:

Propriedade Descrição
Origem de Dados (itens) Origem de dados (tabela) que lista um conjunto predefinido de longitudes e latitudes para exibir como pino de mapa no mapa quando está carregado. Mapear cada uma das colunas dos seus dados utilizando os ItemAddresses, ItemLongitudes, ItemLatitudes e ItemLabels.
Utilizar localização predefinida Se o mapa inicializa numa localização predefinida definida pelo utilizador.
Longitude predefinida Longitude a que o mapa iria quando carregado se a localização padrão de utilização estiver ativada.
Latitude predefinida Latitude a que o mapa iria quando carregado se a localização padrão de utilização estiver ativada.
Nível de zoom predefinido Nível de zoom a que o mapa seria definido quando carregado se a localização padrão de utilização estiver ativada.
Mostrar localização atual Se o mapa deve apresentar a localização atual do utilizador.
Latitude da localização atual A latitude da localização atual do utilizador se Mostrar Localização Atual estiver ativado.
Longitude da localização atual A longitude da localização atual do utilizador se Mostrar Localização Atual estiver ativado.
Vista de satélite Se o estilo do mapa é uma vista de satélite ou uma vista de estrada.
Agrupar marcadores Se os pinos do mapa estão agrupados.
Controlo Zoom Se o controlo Zoom aparece no mapa.
Controlo Bússola Se o controlo Bússola aparece no mapa.
Controlo Rotação Se o controlo Rotação aparece no mapa.
Cor dos marcadores A cor dos pinos.
ItensLabels Uma coluna em Itens com as linhas que pretende utilizar como etiquetas para os pinos.
ItemsAddresses Uma coluna em Itens com as linhas que representam a localização dos pinos.
ItemsLongitudes O nome da coluna na tabela da sua origem de dados com números de ponto flutuante que representam a posição de longitude dos pinos.
ItemsLatitudes O nome da coluna na tabela da sua origem de dados com números de ponto flutuante que representam a posição de latitude dos pinos.
ItemsColors Cor das afixações.
ItemsIcons Ícone das afixações.
Artigos O nome da tabela na sua origem de dados que contém todos os registos que pretende traçar no mapa usando pinos. Cada linha deve ter uma entrada para a etiqueta, longitude e latitude para cada linha.
OnMapClick Como o mapa responde quando uma localização é selecionada.
OnSelect Como a aplicação responde quando é selecionada uma afixação de mapa.
OnLoad Como a aplicação responde quando o carregamento do mapa está concluído.
OnItemsChange Como a aplicação responde quando as afixações do mapa são alteradas.
Mostrar cartões de informações Se os cartões informativos aparecem nas afixações do mapa.
Mostrar formas Se as formas em Shapes_Items aparecem no mapa.
Mostrar etiquetas de formas Se as etiquetas aparecem nas formas do mapa.
Permitir desenho de formas Se o controlo Drawing Tools aparece no mapa.
Permitir eliminação de formas e edição de etiquetas Se as formas podem ser eliminadas e as respetivas etiquetas podem ser editadas no mapa.
Shapes_Items Nome da tabela na sua origem de dados que contém todos os registos com os objetos GeoJSON que pretende mostrar no mapa como formas.
Objetos GeoJSON de Forma O nome da coluna na tabela da sua origem de dados com cadeias que representam os objetos GeoJSON das formas.
Etiquetas de Forma Uma coluna em Shapes_Items com as cadeias que pretende usar como etiquetas para as formas.
Cores de Forma Cor das formas.
OnShapeSelected Como a aplicação responde quando é selecionada uma forma no mapa.
OnShapeCreated Como a aplicação responde quando é criada uma forma no mapa.
OnShapeEdited Como a aplicação responde quando é editada uma forma no mapa.
OnShapeDeleted Como a aplicação responde quando é eliminada uma forma no mapa.

Configurar propriedades de saída para o controlo Mapa

O controlo Mapa produz várias propriedades quando um utilizador interage com ele dentro de uma aplicação. Pode utilizar estas saídas noutros controlos ou para personalizar a experiência.

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

Propriedade Descrição
CenterLocation Localização central do mapa como .Latitude ou .Longitude. A saída será um número inteiro. Por exemplo, chamar Map1.CenterLocation.Latitude irá resultar numa saída de um único número inteiro, como "47,60357".
Selecionados A afixação selecionada no mapa.
SelectedItems As afixações selecionadas ou afixações do cluster selecionado no mapa.
GeocodedItems As localizações geocodificadas das afixações no mapa.
ClickedLocation A última localização clicada no mapa como .Latitude ou .Longitude.
Shapes_Selected O registo da forma selecionada a partir de Shapes_Items.
Shapes_SelectedItems Os registos das formas sobrepostas selecionadas a partir de Shapes_Items.
SelectedShape A forma selecionada no mapa com .Perimeter e .Area.
DeletedShape A última forma eliminada no mapa com .Perimeter e .Area.
GeoJSON A lista de formas no mapa no formato de Coleção de Funcionalidades GeoJSON.

Para colocar uma afixação no endereço introduzido na entrada do endereço, utilizaremos a coleção que criámos na propriedade OnAddressSelect e vamos utilizá-la no controlo Mapa.

Propriedade Value
Items colSelectedAddress
ItemsLatitudes colSelectedAddress.Latitude
ItemsLongitude colSelectedAddress.Longitude

Propriedades de controlo Mapa

Algumas das propriedades da afixação podem ser personalizadas por afixação de localização são explicadas abaixo:

  1. ItemsColors – Para atualizar a cor da afixação para uma cor diferente para cada localização, adicione uma coluna à coleção Cor: Vermelho e use-a na propriedade de dados ItemsColors do controlo Mapa.

  2. ItemsLabels – Para atualizar a etiqueta da afixação para uma etiqueta diferente que mostra o endereço de cada localização, adicione uma coluna à coleção Etiqueta:AddressInput1.FreeformAddress e use-a na propriedade de dados ItemsLabels do controlo Mapa.

  3. ItemsIcons – Para alterar o ícone da afixação para cada localização, adicione uma coluna à coleção e utilize-a na propriedade de dados ItemsIcons do controlo Mapa. Neste exemplo, iremos adicionar um ícone de triângulo com a fórmula como Icon: triangle.

    Dica

    Para obter a lista completa de ícones, vá à 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 adicionar estes à coleção, vá ao separador Avançado do controlo Mapa e atualize as propriedades ItemsColors, ItemsLabels e ItemsIcons.

Propriedades avançadas de controlo Mapa

Executar a aplicação no modo de pré-visualização para testar. O mapa mostra a localização selecionada na entrada de endereços com um ícone de triângulo e o endereço aparece como uma etiqueta no mapa.

Endereço de atualização de controlo Mapa

Consulte também

Controlo Mapa interativo