SDK de formulario de direcciones - Amazon Location Service
PruébaloCaracterísticas principales de PreciosIntroducciónPaíses admitidosRegiones de AWS admitidasreferencia de la API

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

SDK de formulario de direcciones

El SDK de formularios de direcciones agiliza la creación de formularios inteligentes para introducir direcciones. Los formularios de direcciones creados con el SDK proporcionan sugerencias de direcciones relevantes a medida que los usuarios comienzan a escribir. Cuando un usuario selecciona una sugerencia, el formulario de direcciones rellena automáticamente campos como la ciudad, el estado y el código postal. Esto reduce los errores y acelera la entrada de datos al minimizar la entrada manual. Los usuarios también pueden obtener una vista previa de la dirección seleccionada en un mapa y ajustar su marcador de ubicación para indicar entradas o puntos de recogida específicos, lo que mejora considerablemente la precisión.

Demostración del SDK de Address Form que muestra la funcionalidad de autocompletar

Pruébalo

Demostración

Pruebe la demostración del formulario de direcciones completamente funcional.

Constrúyalo usted mismo

Comience Introducción a implementar formularios de direcciones con el SDK de formularios de direcciones o pruebe el enfoque sin código con el asistente WYSIWYG Address Form Builder de Location Service, que funciona con este SDK y al que se puede acceder desde la consola de Amazon Location Service en. https://console.aws.amazon.com/location/ Este asistente interactivo le permite crear formularios personalizados con sugerencias predictivas, relleno automático de campos y diseños flexibles. Los desarrolladores pueden descargar ready-to-use paquetes en React JavaScript TypeScript, React o de forma independiente HTML/JavaScript para facilitar la integración sin necesidad de escribir código.

Características principales de

Las principales características del SDK Address Form incluyen:

  • Proporciona sugerencias integradas para escribir direcciones con anticipación y POIs agiliza la entrada de datos.

  • Permite realizar búsquedas configurables por tipo de lugar (p. ej., códigos postales o localidades) para obtener resultados más precisos.

  • Ofrece una detección automática de la ubicación del navegador para centrar rápidamente a los usuarios en su área actual.

  • Muestra visualizaciones de mapas integradas para una mayor claridad y contexto.

  • Permite ajustar las ubicaciones de las direcciones en el mapa sin perder la ubicación proporcionada por el sistema, lo que garantiza la precisión y el control.

  • Incluye una herramienta de creación WYSIWYG que no requiere codificación, lo que ahorra tiempo y esfuerzo.

  • Implementa la eliminación de rebotes y el almacenamiento en caché para escribir con antelación APIs a fin de optimizar el rendimiento y reducir los costes.

  • Admite la personalización del estilo para que se adapte a la marca y la experiencia de usuario de la aplicación.

Utiliza las siguientes operaciones de la API de Amazon Location Service para proporcionar información de dirección a los formularios de direcciones:

GetTile

Recupera los mosaicos del mapa para representar el mapa interactivo a fin de visualizar la ubicación de la dirección y ajustar la posición de una dirección.

Autocompletar

Proporciona sugerencias de direcciones en tiempo real a medida que los usuarios escriben.

Sugerir

Proporciona sugerencias de direcciones y puntos de interés en tiempo real a medida que los usuarios escriben.

ReverseGeocode

Convierte la ubicación actual de un usuario en la dirección conocida más cercana si decide rellenar automáticamente su dirección en función de su ubicación actual.

GetPlace

Recupera información detallada sobre la ubicación de las direcciones seleccionadas después de seleccionar una dirección de los resultados de la API Autocomplete o Suggest.

Precios

El SDK es gratuito y de código abierto bajo la licencia Apache-2.0. Solo pagas por el uso de la API. Consulta la página de precios de Amazon Location Service.

Introducción

El SDK Address Form se puede utilizar en una aplicación de React o en una JavaScript página y HTML independientes. Para empezar, sigue las instrucciones que aparecen a continuación.

Requisitos previos

nota

El SDK de Address Form requiere una clave de API con los permisos necesarios para funcionar correctamente. Cree una clave de API con los siguientes permisos mediante el asistente Address Form SDK Builder de la consola Amazon Location Service o siga las instrucciones que se indican a continuación para crearla manualmente.

El uso del SDK de formularios de direcciones requiere que se permitan las siguientes acciones en la política de claves de la API:

  • geo-maps:GetTile- Esto es obligatorio al mostrar el componente del mapa. Consulta la referencia GetTilede la API.

  • geo-places:Autocomplete- Esto es obligatorio cuando se utiliza la Autocomplete operación para la funcionalidad de escritura anticipada. Consulta la referencia de la API de autocompletado.

  • geo-places:Suggest- Esto es obligatorio cuando se utiliza la Suggest operación para la función de escritura anticipada. Consulta la referencia sobre la API Suggest.

  • geo-places:ReverseGeocode- Esto es obligatorio cuando se permite a los usuarios proporcionar su ubicación actual mediante la API de geolocalización de los navegadores. Consulta la referencia de la API. ReverseGeocode

  • geo-places:GetPlace- Esto es obligatorio cuando se utiliza la función de escritura anticipada. Consulta la referencia de la GetPlaceAPI.

Sigue la guía Use API Keys to Authenticate para crear una clave API de Amazon Location Service con los permisos necesarios.

Ejemplo de política clave para la CreateKeyAPI con los permisos necesarios:


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

Instalación

HTML/ JavaScript

Incluye el siguiente CSS y JavaScript para el SDK en tu 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

Instala el SDK desde npm: npm install @aws/address-form-sdk-js

Uso del SDK de

Agrega el siguiente código a tu aplicación React. Actualiza AMAZON_LOCATION_API_KEY con tu clave de API y AMAZON_LOCATION_REGION con la región en la que se creó la clave de API. Cuando se envía el formulario, la onSubmit retrollamada proporciona una función getData asíncrona. Llame a esta función con un intendedUse valor para recuperar los datos del formulario.


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

"Storage"Utilícela si necesita almacenar o almacenar en caché los resultados. Esto garantiza el cumplimiento de los requisitos de uso previsto de 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 admitidos

El SDK de formularios de direcciones permite rellenar automáticamente direcciones en todo el mundo mediante Amazon Location Service. Los siguientes países son totalmente compatibles con el análisis de campos de direcciones, en el que cada componente de la dirección se rellena en su campo respectivo:

  • Australia (AU)

  • Canadá (CA)

  • Francia (FR)

  • Hong Kong (HK)

  • Irlanda (IE)

  • Nueva Zelanda (NZ)

  • Filipinas (PH)

  • Singapur (SG)

  • Reino Unido (GB)

  • Estados Unidos (EE. UU.)

Todos los demás países están en estado de vista previa. Los países de vista previa muestran la dirección completa en el addressLineOne campo sin ningún formato específico del país. Las versiones futuras mejorarán este comportamiento y podrás acceder a estas mejoras mediante la última versión del SDK.

Regiones de AWS admitidas

El SDK de Address Form y el asistente Address Form Builder están disponibles en todas las regiones de AWS en las que opera Amazon Location Service, utilizando la Current versión de su APIs. Consulta la lista completa de regiones compatibles en las regiones admitidas por Amazon Location.

referencia de la API

Consulta la referencia de la API README.