Formulir Alamat SDK - Amazon Location Service
CobalahFitur UtamaHargaMemulaiNegara yang DidukungWilayah AWS yang DidukungReferensi API

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Formulir Alamat SDK

SDK Formulir Alamat merampingkan pembuatan formulir entri alamat pintar. Formulir alamat yang dibuat dengan SDK memberikan saran alamat yang relevan saat pengguna mulai mengetik. Ketika pengguna memilih saran, formulir alamat secara otomatis mengisi bidang seperti kota, negara bagian, dan kode pos. Ini mengurangi kesalahan dan mempercepat entri data dengan meminimalkan input manual. Pengguna juga dapat melihat pratinjau alamat yang dipilih pada peta dan menyesuaikan pin lokasinya untuk menunjukkan pintu masuk atau lokasi pengambilan tertentu, secara signifikan meningkatkan akurasi.

Demonstrasi SDK Formulir Alamat yang menunjukkan fungsionalitas pelengkapan otomatis

Cobalah

Demo

Coba demo formulir alamat yang berfungsi penuh.

Bangun Sendiri

Langsung Memulai ke mulai menerapkan formulir alamat menggunakan Address Form SDK, atau coba pendekatan tanpa kode dengan wizard Pembuat Formulir Alamat WYSIWYG Location Service, yang didukung oleh SDK ini dan dapat diakses di konsol Amazon Location Service di. https://console.aws.amazon.com/location/ Wizard interaktif ini memungkinkan Anda membuat formulir yang disesuaikan dengan saran prediktif, populasi bidang otomatis, dan tata letak yang fleksibel. Pengembang dapat mengunduh ready-to-use paket di React JavaScript, React TypeScript, atau mandiri HTML/JavaScript untuk memudahkan integrasi tanpa menulis kode apa pun.

Fitur Utama

Fitur utama SDK Formulir Alamat meliputi:

  • Menyediakan saran typeahead bawaan untuk alamat dan POIs, mempercepat entri data.

  • Mengaktifkan pencarian tipe tempat yang dapat dikonfigurasi (misalnya, kode pos, lokalitas) untuk hasil yang lebih tepat.

  • Menawarkan deteksi lokasi browser otomatis untuk memusatkan pengguna dengan cepat di area mereka saat ini.

  • Menampilkan visualisasi peta bawaan untuk kejelasan dan konteks yang lebih besar.

  • Memungkinkan lokasi alamat disesuaikan pada peta tanpa kehilangan lokasi yang disediakan sistem, memastikan akurasi dan kontrol.

  • Termasuk alat pembuat WYSIWYG yang tidak memerlukan pengkodean, menghemat waktu dan tenaga.

  • Menerapkan debouncing dan caching untuk typeahead untuk mengoptimalkan kinerja APIs dan mengurangi biaya.

  • Mendukung kustomisasi gaya agar sesuai dengan merek aplikasi dan pengalaman pengguna Anda.

Ini menggunakan operasi Amazon Location Service API berikut untuk memberikan informasi alamat ke formulir alamat:

GetTile

Mengambil ubin peta untuk merender peta interaktif untuk memvisualisasikan lokasi alamat dan menyesuaikan posisi alamat.

Pelengkapan otomatis

Memberikan saran alamat real-time saat pengguna mengetik.

Sarankan

Memberikan alamat real-time dan saran POI saat pengguna mengetik.

ReverseGeocode

Mengonversi lokasi pengguna saat ini ke alamat alamat terdekat yang diketahui jika mereka memilih untuk mengisi alamat mereka secara otomatis berdasarkan lokasi mereka saat ini.

GetPlace

Mengambil informasi tempat terperinci untuk alamat yang dipilih setelah memilih alamat dari hasil Autocomplete atau Suggest API.

Harga

SDK gratis dan bersumber terbuka di bawah lisensi Apache-2.0. Anda hanya membayar untuk penggunaan API. Silakan lihat halaman harga Amazon Location Service.

Memulai

Address Form SDK dapat digunakan dalam aplikasi React atau dalam HTML dan JavaScript halaman mandiri. Mulailah dengan mengikuti petunjuk di bawah ini.

Prasyarat

catatan

SDK Formulir Alamat memerlukan kunci API dengan izin yang diperlukan agar berfungsi dengan baik. Buat kunci API dengan izin berikut menggunakan wizard Address Form SDK Builder di Amazon Location Service console, atau ikuti petunjuk di bawah ini untuk membuatnya secara manual.

Penggunaan SDK Formulir Alamat mengharuskan tindakan berikut diizinkan dalam kebijakan kunci API:

  • geo-maps:GetTile- Ini diperlukan saat menampilkan komponen peta. Lihat referensi GetTileAPI.

  • geo-places:Autocomplete- Ini diperlukan saat menggunakan Autocomplete operasi untuk fungsionalitas typeahead. Lihat referensi Autocomplete API.

  • geo-places:Suggest- Ini diperlukan saat menggunakan Suggest operasi untuk fungsionalitas typeahead. Lihat referensi Suggest API.

  • geo-places:ReverseGeocode- Ini diperlukan saat mengizinkan pengguna untuk menyediakan lokasi mereka saat ini menggunakan API geolokasi browser. Lihat referensi ReverseGeocodeAPI.

  • geo-places:GetPlace- Ini diperlukan saat menggunakan fungsionalitas typeahead. Lihat referensi GetPlaceAPI.

Ikuti panduan Gunakan Kunci API untuk mengautentikasi untuk membuat kunci API Amazon Location Service dengan izin yang diperlukan.

Contoh kebijakan kunci untuk CreateKeyAPI dengan izin yang diperlukan:


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

Penginstalan

HTML/ JavaScript

Sertakan CSS berikut dan JavaScript untuk SDK dalam kode HTML Anda


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

Bereaksi

Instal SDK dari npm: npm install @aws/address-form-sdk-js

Gunakan SDK

Tambahkan kode berikut ke aplikasi React Anda. Perbarui AMAZON_LOCATION_API_KEY dengan kunci API Anda dan AMAZON_LOCATION_REGION dengan wilayah tempat kunci API dibuat. Saat formulir dikirimkan, onSubmit callback menyediakan fungsi getData async. Panggil fungsi ini dengan intendedUse nilai untuk mengambil data formulir.


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

Gunakan "Storage" jika Anda perlu menyimpan atau menyimpan hasil cache. Ini memastikan kepatuhan terhadap persyaratan penggunaan yang dimaksudkan oleh 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>
  );
}

Negara yang Didukung

Address Form SDK mendukung pengisian otomatis alamat secara global menggunakan Amazon Location Service. Negara-negara berikut memiliki dukungan penuh dengan parsing bidang alamat, di mana setiap komponen alamat diisi ke dalam bidangnya masing-masing:

  • Australia (AU)

  • Kanada (CA)

  • Prancis (FR)

  • Hong Kong (HK)

  • Irlandia (IE)

  • Selandia Baru (NZ)

  • Filipina (PH)

  • Singapura (SG)

  • Britania Raya (GB)

  • Amerika Serikat (US)

Semua negara lain berada dalam status Pratinjau. Negara pratinjau menampilkan alamat lengkap di addressLineOne bidang tanpa format khusus negara. Rilis mendatang akan meningkatkan perilaku ini dan Anda dapat mengakses peningkatan ini dengan menggunakan SDK versi terbaru.

Wilayah AWS yang Didukung

Panduan Address Form SDK dan Address Form Builder tersedia di semua wilayah AWS tempat Amazon Location Service beroperasi, menggunakan Current versinya APIs. Lihat daftar lengkap wilayah yang didukung di wilayah yang didukung Lokasi Amazon.

Referensi API

Lihat Referensi API README.