À vous d'essayer !Fonctionnalités principales Tarification Démarrage Pays pris en charge Régions AWS prises en charge Référence d’API

SDK de formulaire d'adresse

Le SDK Address Form rationalise la création de formulaires de saisie d'adresses intelligents. Les formulaires d'adresse créés avec le SDK fournissent des suggestions d'adresses pertinentes lorsque les utilisateurs commencent à taper du texte. Lorsqu'un utilisateur sélectionne une suggestion, un formulaire d'adresse remplit automatiquement les champs tels que la ville, l'État et le code postal. Cela réduit les erreurs et accélère la saisie des données en minimisant la saisie manuelle. Les utilisateurs peuvent également prévisualiser l'adresse sélectionnée sur une carte et ajuster son épingle de localisation pour indiquer des entrées ou des lieux de prise en charge spécifiques, ce qui améliore considérablement la précision.

À vous d'essayer !

Démonstration

Essayez la démo du formulaire d'adresse entièrement fonctionnelle.

Construisez-le vous-même

Pour commencer Démarrage à implémenter des formulaires d'adresse à l'aide du SDK Address Form, ou essayez l'approche sans code avec l'assistant WYSIWYG Address Form Builder du Service de localisation, alimenté par ce SDK et accessible depuis la console Amazon Location Service à l'adresse. https://console.aws.amazon.com/location/ Cet assistant interactif vous permet de créer des formulaires personnalisés avec des suggestions prédictives, un remplissage automatique des champs et des mises en page flexibles. Les développeurs peuvent télécharger ready-to-use des packages dans React JavaScript TypeScript, React ou de manière autonome HTML/JavaScript pour une intégration facile sans écrire de code.

Fonctionnalités principales

Les principales fonctionnalités du SDK Address Form sont les suivantes :

Fournit des suggestions d'adresses dactylographiées intégrées et POIs accélère la saisie des données.
Permet une recherche par type de lieu configurable (par exemple, codes postaux, localités) pour des résultats plus précis.
Permet de détecter automatiquement l'emplacement du navigateur afin de recentrer rapidement les utilisateurs sur leur zone actuelle.
Affiche des visualisations cartographiques intégrées pour plus de clarté et de contexte.
Permet d'ajuster les emplacements des adresses sur la carte sans perdre l'emplacement fourni par le système, ce qui garantit à la fois précision et contrôle.
Inclut un outil de création WYSIWYG qui ne nécessite aucun codage, ce qui permet d'économiser du temps et des efforts.
Implémente le rebond et la mise en cache pour Typeahead APIs afin d'optimiser les performances et de réduire les coûts.
Permet de personnaliser le style en fonction de la marque et de l'expérience utilisateur de votre application.

Il utilise les opérations d'API Amazon Location Service suivantes pour fournir des informations d'adresse aux formulaires d'adresse :

GetTile: Récupère les tuiles de carte pour le rendu de la carte interactive afin de visualiser l'emplacement de l'adresse et d'ajuster la position d'une adresse.
Remplissage automatique: Fournit des suggestions d'adresses en temps réel à mesure que les utilisateurs saisissent.
Suggérer: Fournit des suggestions d'adresses et de POI en temps réel au fur et à mesure que les utilisateurs saisissent
ReverseGeocode: Convertit l'emplacement actuel d'un utilisateur en l'adresse connue la plus proche s'il choisit de renseigner automatiquement son adresse en fonction de sa position actuelle.
GetPlace: Récupère des informations détaillées sur le lieu pour les adresses sélectionnées après avoir sélectionné une adresse à partir des résultats de l'API Autocomplete ou Suggest.

Tarification

Le SDK est gratuit et open source sous licence Apache-2.0. Vous ne payez que pour l'utilisation de l'API. Consultez la page de tarification d'Amazon Location Service.

Démarrage

Le SDK Address Form peut être utilisé dans une application React ou dans un code HTML et JavaScript une page autonomes. Commencez en suivant les instructions ci-dessous.

Conditions préalables

Note

Le SDK Address Form nécessite une clé d'API dotée des autorisations requises pour fonctionner correctement. Créez une clé d'API avec les autorisations suivantes à l'aide de l'assistant Address Form SDK Builder de la console Amazon Location Service, ou suivez les instructions ci-dessous pour la créer manuellement.

L'utilisation du SDK Address Form nécessite que les actions suivantes soient autorisées dans la politique des clés d'API :

geo-maps:GetTile- Cela est obligatoire lors de l'affichage du composant cartographique. Consultez la référence de GetTilel'API.
geo-places:Autocomplete- Cela est nécessaire lors de l'utilisation de l'Autocompleteopération pour la fonctionnalité de saisie anticipée. Consultez la référence de l'API Autocomplete.
geo-places:Suggest- Cela est nécessaire lors de l'utilisation de l'Suggestopération pour la fonctionnalité de saisie anticipée. Consultez la référence de l'API Suggest.
geo-places:ReverseGeocode- Cela est nécessaire lorsque vous autorisez les utilisateurs à fournir leur position actuelle à l'aide de l'API de géolocalisation des navigateurs. Consultez la référence de ReverseGeocodel'API.
geo-places:GetPlace- Cela est nécessaire lors de l'utilisation de la fonctionnalité Typeahead. Consultez la référence de GetPlacel'API.

Suivez le guide Utiliser les clés d'API pour vous authentifier afin de créer une clé d'API Amazon Location Service avec les autorisations nécessaires.

Exemple de politique clé pour l'CreateKeyAPI avec les autorisations requises :



{
  "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"
    ]
  }
}

Installation

HTML/ JavaScript

Incluez le code CSS et JavaScript le SDK suivants dans votre code 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

Installez le SDK depuis npm : npm install @aws/address-form-sdk-js

Utiliser le SDK

Ajoutez le code suivant à votre application React. Effectuez la mise à jour AMAZON_LOCATION_API_KEY avec votre clé d'API et AMAZON_LOCATION_REGION avec la région où la clé d'API a été créée. Lorsque le formulaire est soumis, le onSubmit rappel fournit une fonction getData asynchrone. Appelez cette fonction avec une intendedUse valeur pour récupérer les données du formulaire.



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

Note

À utiliser "Storage" si vous devez stocker ou mettre en cache les résultats. Cela garantit la conformité aux exigences d'utilisation prévues d'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>
  );
}

Pays pris en charge

Le SDK Address Form prend en charge le remplissage automatique des adresses dans le monde entier à l'aide d'Amazon Location Service. Les pays suivants offrent une prise en charge complète de l'analyse des champs d'adresse, chaque composant d'adresse étant renseigné dans son champ respectif :

Australie (AU)
Canada (CA)
France (FR)
Hong Kong (HK)
Irlande (IE)
Nouvelle-Zélande (NZ)
Philippines (PH)
Singapour (SG)
Royaume-Uni (GB)
États-Unis (US)

Tous les autres pays sont en version préliminaire. Les pays d'aperçu affichent l'adresse complète dans le addressLineOne champ sans mise en forme spécifique au pays. Les prochaines versions amélioreront ce comportement et vous pourrez accéder à ces améliorations en utilisant la dernière version du SDK.

Régions AWS prises en charge

Le SDK Address Form et l'assistant Address Form Builder sont disponibles dans toutes les régions AWS où Amazon Location Service opère, en utilisant la Current version de celui-ci APIs. Consultez la liste complète des régions prises en charge dans les régions prises en charge par Amazon Location.

Référence d’API

Reportez-vous à la référence de l'API README.

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

SDK de rendu cartographique par langue

IA et LLMs