Modulo di indirizzo SDK - Servizio di posizione Amazon
ProvaloCaratteristiche chiavePrezziNozioni di basePaesi supportatiRegioni AWS supportateDocumentazione di riferimento delle API

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Modulo di indirizzo SDK

L'Address Form SDK semplifica la creazione di moduli intelligenti per l'immissione degli indirizzi. I moduli di indirizzo creati con l'SDK forniscono suggerimenti pertinenti sugli indirizzi non appena gli utenti iniziano a digitare. Quando un utente seleziona un suggerimento, un modulo di indirizzo compila automaticamente campi come città, stato e codice postale. Ciò riduce gli errori e velocizza l'immissione dei dati riducendo al minimo l'immissione manuale. Gli utenti possono anche visualizzare in anteprima l'indirizzo selezionato su una mappa e regolarne la posizione per indicare ingressi o punti di ritiro specifici, migliorando notevolmente la precisione.

Dimostrazione di Address Form SDK che mostra la funzionalità di completamento automatico

Provalo

Demo

Prova la demo del modulo di indirizzi completamente funzionante.

Costruiscilo tu stesso

Passa a iniziare Nozioni di base a implementare i moduli di indirizzi utilizzando l'Address Form SDK oppure prova l'approccio senza codice con la procedura guidata WYSIWYG Address Form Builder di Location Service, basata su questo SDK e accessibile nella console Amazon Location Service all'indirizzo. https://console.aws.amazon.com/location/ Questa procedura guidata interattiva ti consente di creare moduli personalizzati con suggerimenti predittivi, compilazione automatica dei campi e layout flessibili. Gli sviluppatori possono scaricare ready-to-use pacchetti in React JavaScript, React TypeScript o standalone HTML/JavaScript per una facile integrazione senza scrivere alcun codice.

Caratteristiche chiave

Le caratteristiche principali di Address Form SDK includono:

  • Fornisce suggerimenti di battitura predefiniti per gli indirizzi e velocizza POIs l'immissione dei dati.

  • Consente la ricerca configurabile per tipo di località (ad esempio codici postali, località) per risultati più precisi.

  • Offre il rilevamento automatico della posizione del browser per indirizzare rapidamente gli utenti sulla loro area corrente.

  • Visualizza visualizzazioni cartografiche integrate per una maggiore chiarezza e contesto.

  • Consente di modificare le posizioni degli indirizzi sulla mappa senza perdere la posizione fornita dal sistema, garantendo precisione e controllo.

  • Include uno strumento di creazione WYSIWYG che non richiede alcuna codifica, risparmiando tempo e fatica.

  • Implementa il debouncing e il caching per typeahead per ottimizzare le prestazioni e ridurre i costi. APIs

  • Supporta la personalizzazione dello stile in base al marchio e all'esperienza utente dell'applicazione.

Utilizza le seguenti operazioni API di Amazon Location Service per fornire informazioni sugli indirizzi nei moduli di indirizzo:

GetTile

Recupera i riquadri della mappa per renderizzare la mappa interattiva per visualizzare la posizione dell'indirizzo e modificare la posizione di un indirizzo.

Completamento automatico

Fornisce suggerimenti sugli indirizzi in tempo reale durante la digitazione degli utenti.

Suggerisci

Fornisce suggerimenti in tempo reale su indirizzi e POI durante la digitazione degli utenti.

ReverseGeocode

Converte la posizione corrente di un utente nell'indirizzo di indirizzo conosciuto più vicino se sceglie di inserire automaticamente il proprio indirizzo in base alla posizione corrente.

GetPlace

Recupera informazioni dettagliate sul luogo per gli indirizzi selezionati dopo aver selezionato un indirizzo dai risultati dell'API Autocomplete o Suggest.

Prezzi

L'SDK è gratuito e open source con licenza Apache-2.0. Paghi solo per l'utilizzo dell'API. Consulta la pagina dei prezzi di Amazon Location Service.

Nozioni di base

L'Address Form SDK può essere utilizzato all'interno di un'app React o in una pagina HTML e JavaScript in una pagina autonomi. Inizia seguendo le istruzioni riportate di seguito.

Prerequisiti

Nota

L'Address Form SDK richiede una chiave API con le autorizzazioni necessarie per funzionare correttamente. Crea una chiave API con le seguenti autorizzazioni utilizzando la procedura guidata Address Form SDK Builder nella console di Amazon Location Service oppure segui le istruzioni riportate di seguito per crearla manualmente.

L'uso dell'Address Form SDK richiede l'autorizzazione delle seguenti azioni nella politica delle chiavi API:

  • geo-maps:GetTile- È necessario quando si visualizza il componente della mappa. Vedi il riferimento all'GetTileAPI.

  • geo-places:Autocomplete- È necessario quando si utilizza l'Autocompleteoperazione per la funzionalità typeahead. Vedi il riferimento all'API Autocomplete.

  • geo-places:Suggest- È necessario quando si utilizza l'Suggestoperazione per la funzionalità typeahead. Vedi il riferimento all'API Suggest.

  • geo-places:ReverseGeocode- È necessario quando si consente agli utenti di fornire la propria posizione corrente utilizzando l'API di geolocalizzazione dei browser. Vedi il riferimento all'API. ReverseGeocode

  • geo-places:GetPlace- È necessario quando si utilizza la funzionalità typeahead. Vedi il riferimento all'GetPlaceAPI.

Segui la guida Usa le chiavi API per l'autenticazione per creare una chiave API Amazon Location Service con le autorizzazioni necessarie.

Esempio di politica chiave per l'CreateKeyAPI con autorizzazioni richieste:


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

Installazione

HTML/ JavaScript

Includi i seguenti CSS e JavaScript per l'SDK nel tuo codice 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

Installa l'SDK da npm: npm install @aws/address-form-sdk-js

Usa l'SDK

Aggiungi il seguente codice alla tua app React. Aggiorna AMAZON_LOCATION_API_KEY con la tua chiave API e AMAZON_LOCATION_REGION con la regione in cui è stata creata la chiave API. Quando il modulo viene inviato, il onSubmit callback fornisce una funzione getData asincrona. Chiama questa funzione con un intendedUse valore per recuperare i dati del modulo.


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

Utilizzare "Storage" se è necessario archiviare o memorizzare nella cache i risultati. Ciò garantisce la conformità ai requisiti di utilizzo previsto di 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>
  );
}

Paesi supportati

L'Address Form SDK supporta la compilazione automatica degli indirizzi a livello globale utilizzando Amazon Location Service. I seguenti paesi offrono il supporto completo per l'analisi dei campi degli indirizzi, in cui ogni componente dell'indirizzo viene compilato nel rispettivo campo:

  • Australia (AU)

  • Canada (CA)

  • Francia (FR)

  • Hong Kong (HK)

  • Irlanda (IE)

  • Nuova Zelanda (NZ)

  • Filippine (PH)

  • Singapore (SG)

  • Regno Unito (GB)

  • Stati Uniti (US)

Tutti gli altri paesi sono in stato di anteprima. I paesi di anteprima mostrano l'indirizzo completo nel addressLineOne campo senza la formattazione specifica del paese. Le versioni future miglioreranno questo comportamento e potrai accedere a questi miglioramenti utilizzando l'ultima versione dell'SDK.

Regioni AWS supportate

La procedura guidata Address Form SDK e Address Form Builder sono disponibili in tutte le regioni AWS in cui opera Amazon Location Service, utilizzando la sua Current versione. APIs Visualizza l'elenco completo delle regioni supportate nelle regioni supportate da Amazon Location.

Documentazione di riferimento delle API

Consulta il riferimento all'API README.