Uso de APIs de geolocalização no Forms adaptável using-geolocation-api-s-in-adaptive-forms
Neste artigo, analisaremos o uso da API de geolocalização do Google para preencher campos de um formulário adaptável. Esse caso de uso geralmente é usado quando você deseja preencher os campos de endereço atuais em um formulário.
As etapas a seguir foram seguidas para usar a API de geolocalização no Adaptive Forms.
-
Obter chave de API do Google para usar a plataforma Google Maps. Você pode obter uma chave de avaliação válida por 1 ano.
-
O fragmento de formulário adaptável foi criado com campos para manter o endereço atual
-
A API de geolocalização foi invocada no evento de clique do objeto de imagem do Formulário adaptável
-
Os dados JSON retornados pela chamada à API foram analisados e os valores dos campos de Formulário adaptável foram definidos de acordo.
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;
}
}
});
}
Na linha 1, usamos a API de geolocalização do HTML para obter a localização atual. Depois que a localização atual é obtida, passamos a localização atual para a função showPosition.
Na função showPosition, usamos a API do Google para buscar os detalhes do endereço para a latitude e a longitude fornecidas.
O JSON retornado pela API é analisado para definir os campos do Formulário adaptável.
Para colocar esse recurso no servidor, siga as etapas a seguir
- Instale e inicie o servidor do AEM Forms.
Esse recurso foi testado no AEM Forms 6.3 e posterior
- Obter a chave de API do Google.
- Importe os ativos relacionados a este artigo para o AEM.
- Abra o fragmento do Formulário adaptável no modo de edição.
- Abra o editor de regras para o componente Opção de imagem.
- Substitua o <your_api_key> com a chave de API do Google.
- Salve as alterações.
- Visualizar o formulário.
- Clique no ícone "geolocalização".
- O formulário deve ser preenchido com a localização atual.