Uso de las API de geolocalización en Forms adaptable
- 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.
-
Obtener clave API de Google para usar la plataforma Google Maps. Puede obtener una clave de prueba con una validez de 1 año.
-
El fragmento de formulario adaptable se creó con campos para contener la dirección actual
-
La API de geolocalización se invocó en el evento de clic del objeto de imagen del formulario adaptable
-
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;
}
}
});
}
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.
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.