Probieren Sie es aus Wichtigste Funktionen Preisgestaltung Erste Schritte Unterstützte Länder Unterstützte AWS Regionen API-Referenz

Adressformular SDK

Das Address Form SDK optimiert die Erstellung intelligenter Adresseingabeformulare. Mit dem SDK erstellte Adressformulare bieten relevante Adressvorschläge, wenn Benutzer mit der Eingabe beginnen. Wenn ein Benutzer einen Vorschlag auswählt, füllt ein Adressformular automatisch Felder wie Stadt, Bundesland und Postleitzahl aus. Dadurch werden Fehler reduziert und die Dateneingabe beschleunigt, da manuelle Eingaben minimiert werden. Benutzer können sich auch eine Vorschau der ausgewählten Adresse auf einer Karte ansehen und ihre Standortnadel so anpassen, dass sie auf bestimmte Eingänge oder Abholorte hinweist, wodurch die Genauigkeit erheblich verbessert wird.

Probieren Sie es aus

Demo

Probieren Sie die voll funktionsfähige Adressformular-Demo aus.

Bauen Sie es selbst

Gehen Sie weiter, Erste Schritte um mit der Implementierung von Adressformularen mithilfe des Address Form SDK zu beginnen, oder probieren Sie den No-Code-Ansatz mit dem WYSIWYG-Assistenten zum Erstellen von Adressformularen von Location Service aus, der von diesem SDK unterstützt wird und auf den Sie in der Amazon Location Service-Konsole unter zugreifen können. https://console.aws.amazon.com/location/ Mit diesem interaktiven Assistenten können Sie benutzerdefinierte Formulare mit prädiktiven Vorschlägen, automatischer Feldauffüllung und flexiblen Layouts erstellen. Entwickler können ready-to-use Pakete in React JavaScript, React oder eigenständig herunterladen TypeScript, um sie einfach HTML/JavaScript zu integrieren, ohne Code schreiben zu müssen.

Wichtigste Funktionen

Zu den wichtigsten Funktionen des Address Form SDK gehören:

Bietet integrierte Textvorschläge für Adressen und beschleunigt POIs die Dateneingabe.
Ermöglicht eine konfigurierbare Ortssuche (z. B. nach Postleitzahlen, Orten) für genauere Ergebnisse.
Bietet eine automatische Erkennung des Browser-Standorts, sodass Benutzer sich schnell auf ihren aktuellen Bereich konzentrieren können.
Zeigt integrierte Kartenvisualisierungen für mehr Übersichtlichkeit und besseren Kontext an.
Ermöglicht die Anpassung von Adresspositionen auf der Karte, ohne dass der vom System bereitgestellte Standort verloren geht, wodurch sowohl Genauigkeit als auch Kontrolle gewährleistet werden.
Beinhaltet ein WYSIWYG-Builder-Tool, das keine Codierung erfordert, was Zeit und Mühe spart.
Implementiert Debouncing und Caching für Typeahead APIs , um die Leistung zu optimieren und die Kosten zu senken.
Unterstützt die Anpassung des Stils an die Marke und das Benutzererlebnis Ihrer Anwendung.

Es verwendet die folgenden Amazon Location Service API-Operationen, um Adressinformationen für Adressformulare bereitzustellen:

GetTile: Ruft Kartenkacheln zum Rendern der interaktiven Karte ab, um den Standort der Adresse zu visualisieren und die Position einer Adresse anzupassen.
AutoVervollständigen: Bietet Adressvorschläge in Echtzeit, während Benutzer tippen.
Vorschlagen: Bietet Adress- und POI-Vorschläge in Echtzeit, während Benutzer tippen.
ReverseGeocode: Konvertiert den aktuellen Standort eines Benutzers in die nächstgelegene bekannte Adressadresse, wenn er sich dafür entscheidet, seine Adresse basierend auf seinem aktuellen Standort automatisch auszufüllen.
GetPlace: Ruft detaillierte Ortsinformationen für ausgewählte Adressen ab, nachdem eine Adresse aus den Ergebnissen der Autocomplete- oder Suggest-API ausgewählt wurde.

Preisgestaltung

Das SDK ist kostenlos und steht unter der Apache-2.0-Lizenz als Open Source zur Verfügung. Sie zahlen nur für die API-Nutzung. Bitte schauen Sie auf der Preisseite von Amazon Location Service nach.

Erste Schritte

Das Address Form SDK kann in einer React-App oder in einer eigenständigen JavaScript HTML-Seite verwendet werden. Folgen Sie zunächst den nachstehenden Anweisungen.

Voraussetzungen

Anmerkung

Das Address Form SDK benötigt einen API-Schlüssel mit den erforderlichen Berechtigungen, um ordnungsgemäß zu funktionieren. Erstellen Sie mithilfe des Address Form SDK Builder-Assistenten in der Amazon Location Service Service-Konsole einen API-Schlüssel mit den folgenden Berechtigungen, oder folgen Sie den nachstehenden Anweisungen, um ihn manuell zu erstellen.

Für die Verwendung des Address Form SDK müssen die folgenden Aktionen in der API-Schlüsselrichtlinie zulässig sein:

geo-maps:GetTile- Dies ist erforderlich, wenn die Kartenkomponente angezeigt wird. Weitere Informationen finden Sie in der GetTileAPI-Referenz.
geo-places:Autocomplete- Dies ist erforderlich, wenn Sie die Autocomplete Operation für die Typeahead-Funktionalität verwenden. Weitere Informationen finden Sie in der Autocomplete-API-Referenz.
geo-places:Suggest- Dies ist erforderlich, wenn Sie den Suggest Vorgang für die Typeahead-Funktionalität verwenden. Weitere Informationen finden Sie in der Suggest-API-Referenz.
geo-places:ReverseGeocode- Dies ist erforderlich, wenn Benutzer ihren aktuellen Standort mithilfe der Geolocation-API von Browsern angeben können. Weitere Informationen finden Sie in der API-Referenz ReverseGeocode.
geo-places:GetPlace- Dies ist erforderlich, wenn Sie die Typeahead-Funktionalität verwenden. Weitere Informationen finden Sie in der GetPlaceAPI-Referenz.

Folgen Sie der Anleitung API-Schlüssel zur Authentifizierung verwenden, um einen Amazon Location Service API-Schlüssel mit den erforderlichen Berechtigungen zu erstellen.

Beispiel für eine Schlüsselrichtlinie für die CreateKeyAPI mit den erforderlichen Berechtigungen:



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

Fügen Sie das folgende CSS und JavaScript für das SDK in Ihren HTML-Code ein



...
<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

Installieren Sie das SDK von npm: npm install @aws/address-form-sdk-js

Verwenden Sie das SDK

Fügen Sie Ihrer React-App den folgenden Code hinzu. Aktualisiere AMAZON_LOCATION_API_KEY mit deinem API-Schlüssel und AMAZON_LOCATION_REGION mit der Region, in der der API-Schlüssel erstellt wurde. Wenn das Formular gesendet wird, bietet der onSubmit Callback eine getData asynchrone Funktion. Rufen Sie diese Funktion mit einem intendedUse Wert auf, um die Formulardaten abzurufen.



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

Anmerkung

Verwenden Sie "Storage" diese Option, wenn Sie die Ergebnisse speichern oder zwischenspeichern müssen. Dadurch wird die Einhaltung der Verwendungsbestimmungen von Amazon Location Service gewährleistet.

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

Unterstützte Länder

Das Address Form SDK unterstützt das automatische Ausfüllen von Adressen weltweit mithilfe von Amazon Location Service. In den folgenden Ländern wird die Analyse von Adressfeldern, bei der jede Adresskomponente in das entsprechende Feld eingefügt wird, uneingeschränkt unterstützt:

Australien (AU)
Kanada (CA)
Frankreich (FR)
Hongkong (HK)
Irland (IE)
Neuseeland (NZ)
Philippinen (PH)
Singapur (SG)
Großbritannien und Nordirland (GB)
Vereinigte Staaten (USA)

Alle anderen Länder befinden sich im Vorschaustatus. In den Vorschauländern wird die vollständige Adresse im addressLineOne Feld ohne landesspezifische Formatierung angezeigt. Zukünftige Versionen werden dieses Verhalten verbessern, und Sie können auf diese Verbesserungen zugreifen, indem Sie die neueste Version des SDK verwenden.

Unterstützte AWS Regionen

Das Address Form SDK und der Address Form Builder-Assistent sind in allen AWS-Regionen verfügbar, in denen Amazon Location Service tätig ist, und zwar in der Current Version von APIs Die vollständige Liste der unterstützten Regionen finden Sie unter Unterstützte Regionen von Amazon Location.

API-Referenz

Weitere Informationen finden Sie in der README-API-Referenz.

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

Kartenrendering-SDK nach Sprache

KI und LLMs