DocumentaciónAEMTutoriales de AEMTutoriales de AEM Forms

Uso de las API de geolocalización en Forms adaptable

Última actualización: 5 de mayo de 2025
  • Se aplica a:
  • Experience Manager 6.4
  • Experience Manager 6.5
  • Temas:
  • Formularios adaptables

Creado para:

  • Experimentado
  • Desarrollador

En este artículo, analizaremos el uso de la API de geolocalización de Google para rellenar campos de un formulario adaptable. Este caso de uso se utiliza comúnmente cuando desea rellenar los campos de dirección actuales en un formulario.

Se han seguido los siguientes pasos para utilizar la API de geolocalización en Forms adaptable.

  1. Obtener clave API de Google para usar la plataforma Google Maps. Puede obtener una clave de prueba con una validez de 1 año.

  2. El fragmento de formulario adaptable se creó con campos para contener la dirección actual

  3. La API de geolocalización se invocó en el evento de clic del objeto de imagen del formulario adaptable

  4. Se analizaron los datos JSON devueltos por la llamada de API y los valores de los campos del formulario adaptable se establecieron en consecuencia.

navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position)
{
console.log(" I am inside the showPosition in fragment");
console.log("Latitude: " + position.coords.latitude + "Longitude " + position.coords.longitude);
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&key=<your_api_key>";
  console.log(url);

  $.getJSON(url,function (data, textStatus){

    var location=data.results[0].formatted_address;
    console.log(location);

    for(i=0;i<data.results[0].address_components.length;i++)
        {
          if(data.results[0].address_components[i].types[0] == "street_number")
            {
              streetNumber.value = data.results[0].address_components[i].long_name;
            }
          if(data.results[0].address_components[i].types[0] == "route")
            {
              streetName.value = data.results[0].address_components[i].long_name;
            }
            if(data.results[0].address_components[i].types[0] == "postal_code")
            {

              zipCode.value = data.results[0].address_components[i].long_name;
            }
            if(data.results[0].address_components[i].types[0] == "locality")
            {

              city.value = data.results[0].address_components[i].long_name;
            }
          if(data.results[0].address_components[i].types[0] == "administrative_area_level_1")
            {

              state.value = data.results[0].address_components[i].long_name;
            }
        }

  });
}

Los campos se rellenan con la API de geolocalización

En la línea 1 utilizamos la API de geolocalización de HTML para obtener la ubicación actual. Una vez obtenida la ubicación actual, pasamos la ubicación actual a la función showPosition.

En la función showPosition, utilizamos la API de Google para recuperar los detalles de dirección de la latitud y longitud dadas.

El JSON devuelto por la API se analiza a continuación para establecer los campos del formulario adaptable.

NOTA
Para realizar pruebas, puede utilizar el protocolo HTTP con localhost en la dirección URL.
Para el servidor de producción, deberá habilitar SSL en el servidor de AEM para obtener esta capacidad.
La muestra asociada con este artículo se ha probado con la dirección de EE. UU. Si desea utilizar esta capacidad en otras ubicaciones geográficas, es posible que tenga que modificar el análisis de JSON.

Para poner esta capacidad en su servidor, siga los siguientes pasos

  • Instale e inicie el servidor de AEM Forms.

Esta capacidad se probó en AEM Forms 6.3 y versiones posteriores

  • Obtener clave API de Google.
  • Importe los recursos relacionados con este artículo en AEM.
  • Abrir el fragmento de formulario adaptable en modo de edición.
  • Abra el editor de reglas para el componente Opción de imagen.
  • Reemplace la <your_api_key> por la clave de API de Google.
  • Guarde los cambios.
  • Vista previa del formulario.
  • Haga clic en el icono "geolocalización".
  • El formulario debe rellenarse con la ubicación actual.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e