Experimente Recursos principais Preços Conceitos básicos Países compatíveis Regiões da AWS compatíveis Referência da API

Formulário de endereço SDK

O SDK do Formulário de Endereço simplifica a criação de formulários inteligentes de entrada de endereços. Os formulários de endereço criados com o SDK fornecem sugestões de endereço relevantes à medida que os usuários começam a digitar. Quando um usuário seleciona uma sugestão, um formulário de endereço preenche automaticamente campos como cidade, estado e código postal. Isso reduz os erros e acelera a entrada de dados, minimizando a entrada manual. Os usuários também podem visualizar o endereço selecionado em um mapa e ajustar seu pino de localização para indicar entradas específicas ou locais de coleta, melhorando significativamente a precisão.

Experimente

Demonstração

Experimente a demonstração do formulário de endereço totalmente funcional.

Construa você mesmo

Comece Conceitos básicos a implementar formulários de endereço usando o SDK do Address Form ou experimente a abordagem sem código com o assistente WYSIWYG Address Form Builder do Location Service, desenvolvido por esse SDK e acessível no console do Amazon Location Service em. https://console.aws.amazon.com/location/ Esse assistente interativo permite criar formulários personalizados com sugestões preditivas, preenchimento automático de campos e layouts flexíveis. Os desenvolvedores podem baixar ready-to-use pacotes em React JavaScript TypeScript, React ou standalone HTML/JavaScript para facilitar a integração sem escrever nenhum código.

Recursos principais

Os principais recursos do SDK do formulário de endereço incluem:

Fornece sugestões de digitação antecipada integradas para endereços e POIs acelera a entrada de dados.
Permite a pesquisa configurável por tipo de local (por exemplo, códigos postais, localidades) para obter resultados mais precisos.
Oferece detecção automática da localização do navegador para centralizar rapidamente os usuários em sua área atual.
Exibe visualizações de mapas integradas para maior clareza e contexto.
Permite que as localizações dos endereços sejam ajustadas no mapa sem perder a localização fornecida pelo sistema, garantindo precisão e controle.
Inclui uma ferramenta de criação WYSIWYG que não requer codificação, economizando tempo e esforço.
Implementa depuração e armazenamento em cache para digitação antecipada para otimizar o desempenho e reduzir APIs custos.
Suporta personalização de estilo para combinar com a marca e a experiência do usuário do seu aplicativo.

Ele usa as seguintes operações de API do Amazon Location Service para fornecer informações de endereço aos formulários de endereço:

GetTile: Recupera blocos do mapa para renderizar o mapa interativo para visualizar a localização do endereço e ajustar a posição de um endereço.
Autocompletar: Fornece sugestões de endereço em tempo real à medida que os usuários digitam.
Sugira: Fornece sugestões de endereço e POI em tempo real à medida que os usuários digitam.
ReverseGeocode: Converte a localização atual de um usuário no endereço conhecido mais próximo se ele optar por preencher automaticamente o endereço com base na localização atual.
GetPlace: Recupera informações detalhadas sobre o local dos endereços selecionados depois de selecionar um endereço nos resultados da API Autocomplete ou Suggest.

Preços

O SDK é gratuito e de código aberto sob a licença Apache-2.0. Você paga apenas pelo uso da API. Consulte a página de preços do Amazon Location Service.

Conceitos básicos

O SDK do Formulário de Endereço pode ser usado em um aplicativo React ou em uma página e JavaScript HTML autônomos. Comece seguindo as instruções abaixo.

Pré-requisitos

nota

O SDK do formulário de endereço exige uma chave de API com as permissões necessárias para funcionar corretamente. Crie uma chave de API com as seguintes permissões usando o assistente Address Form SDK Builder no console do Amazon Location Service ou siga as instruções abaixo para criá-la manualmente.

O uso do SDK do formulário de endereço exige que as seguintes ações sejam permitidas na política de chaves de API:

geo-maps:GetTile- Isso é necessário ao exibir o componente do mapa. Veja a referência GetTileda API.
geo-places:Autocomplete- Isso é necessário ao usar a Autocomplete operação para a funcionalidade de digitação antecipada. Veja a referência da API de preenchimento automático.
geo-places:Suggest- Isso é necessário ao usar a Suggest operação para a funcionalidade de digitação antecipada. Veja a referência da API Suggest.
geo-places:ReverseGeocode- Isso é necessário ao permitir que os usuários forneçam sua localização atual usando a API de geolocalização dos navegadores. Veja a referência ReverseGeocodeda API.
geo-places:GetPlace- Isso é necessário ao usar a funcionalidade de digitação antecipada. Veja a referência GetPlaceda API.

Siga o guia Use API Keys to authenticate para criar uma chave de API do Amazon Location Service com as permissões necessárias.

Exemplo de política de chaves para a CreateKeyAPI com as permissões necessárias:



{
  "KeyName": "ExampleKey",
  "ExpireTime": "YYYY-MM-DDThh:mm:ss.sss",
  "Restrictions": {
    "AllowActions": [
      "geo-maps:GetTile",
      "geo-places:Autocomplete",
      "geo-places:Suggest",
      "geo-places:GetPlace",
      "geo-places:ReverseGeocode"
    ],
    "AllowResources": [
      "arn:aws:geo-maps:<Region>::provider/default",
      "arn:aws:geo-places:<Region>::provider/default"
    ]
  }
}

Instalação

HTML/ JavaScript

Inclua o seguinte CSS e JavaScript para o SDK em seu código HTML



...
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.css"
/>
...
</head>
...
<body>
...
<script src="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.umd.js"></script>
</body>
...

React

Instale o SDK do npm: npm install @aws/address-form-sdk-js

Usar o SDK do

Adicione o código a seguir ao seu aplicativo React. Atualize AMAZON_LOCATION_API_KEY com sua chave de API e AMAZON_LOCATION_REGION com a região em que a chave de API foi criada. Quando o formulário é enviado, o onSubmit retorno de chamada fornece uma função getData assíncrona. Chame essa função com um intendedUse valor para recuperar os dados do formulário.



onSubmit: async (getData) => {
  const data = await getData({
    intendedUse: "SingleUse", // or "Storage"
  });
};

nota

Use "Storage" se precisar armazenar ou armazenar em cache os resultados. Isso garante a conformidade com os requisitos de uso pretendido do Amazon Location Service.

HTML/JavaScript



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Address Form</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.css"
    />
  </head>
  <body>
    <form
      id="amazon-location-address-form"
      class="address-form flex-row flex-1"
    >
      <div class="flex-column">
        <input
          data-type="address-form"
          name="addressLineOne"
          data-api-name="suggest"
          data-show-current-location="true"
        />
        <input data-type="address-form" name="addressLineTwo" />
        <input data-type="address-form" name="city" />
        <input data-type="address-form" name="province" />
        <input data-type="address-form" name="postalCode" />
        <input data-type="address-form" name="country" />
        <div class="flex-row">
          <button data-type="address-form" type="submit">Submit</button>
          <button data-type="address-form" type="reset">Reset</button>
        </div>
      </div>
      <div data-type="address-form" data-map-style="Standard,Light"></div>
    </form>
    <></script>
script src="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.umd.js"
    <script>
      AddressFormSDK.render({
        root: "#amazon-location-address-form",
        apiKey: "AMAZON_LOCATION_API_KEY",
        region: "AMAZON_LOCATION_REGION",
        showCurrentCountryResultsOnly: true,
        onSubmit: async (getData) => {
          // Get form data with intendedUse parameter
          // Use "SingleUse" for one-time display only
          // Use "Storage" if you plan to store/cache the results - makes an extra API call to grant storage rights
          const data = await getData({ intendedUse: "SingleUse" });
          console.log(data);
        },
      });
    </script>
  </body>
</html>

React



import React from 'react';
import { AddressForm, Flex } from "@aws/address-form-sdk-js";

export default function App() {
  return (
    <AddressForm
      apiKey="AMAZON_LOCATION_API_KEY"
      region="AMAZON_LOCATION_REGION"
      onSubmit={async (getData) => {
        // Get form data with intendedUse parameter
        // Use "SingleUse" for one-time display only
        // Use "Storage" if you plan to store/cache the results - makes an extra API call to grant storage rights
        const data = await getData({ intendedUse: "SingleUse" });
        console.log(data);
      }}
    >
      <Flex
        direction="row"
        flex
      >
        <Flex direction="column">
          <input
            data-api-name="autocomplete"
            data-type="address-form"
            name="addressLineOne"
            placeholder="Enter address"
          />
          <input
            data-type="address-form"
            name="addressLineTwo"
          />
          <input
            data-type="address-form"
            name="city"
            placeholder="City"
          />
          <input
            data-type="address-form"
            name="province"
            placeholder="State/Province"
          />
          <input
            data-type="address-form"
            name="postalCode"
          />
          <input
            data-type="address-form"
            name="country"
            placeholder="Country"
          />
          <Flex direction="row">
            <button address-form="submit">
              Submit
            </button>
            <button address-form="reset">
              Reset
            </button>
          </Flex>
        </Flex>
        <AddressFormMap
          mapStyle={[
            'Standard',
            'Light'
          ]}
         />
      </Flex>
    </AddressForm>
  );
}

Países compatíveis

O SDK do Address Form suporta o preenchimento automático de endereços em todo o mundo usando o Amazon Location Service. Os seguintes países têm suporte total com a análise do campo de endereço, em que cada componente de endereço é preenchido em seu respectivo campo:

Austrália (AU)
Canadá (CA)
França (FR)
Hong Kong (HK)
Irlanda (IE)
Nova Zelândia (NZ)
Filipinas (PH)
Singapura (SG)
Reino Unido (GB)
Estados Unidos (EUA)

Todos os outros países estão no status Pré-visualização. Os países de visualização exibem o endereço completo no addressLineOne campo sem formatação específica do país. Versões futuras melhorarão esse comportamento e você poderá acessar essas melhorias usando a versão mais recente do SDK.

Regiões da AWS compatíveis

O Address Form SDK e o assistente Address Form Builder estão disponíveis em todas as regiões da AWS nas quais o Amazon Location Service opera, usando sua Current APIs versão. Veja a lista completa de regiões suportadas nas regiões suportadas pela Amazon Location.

Referência da API

Consulte a referência da API README.

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

SDK de renderização de mapas por idioma

IA e LLMs