Utilizzo delle API di geolocalizzazione in Forms adattivo

In questo articolo, analizzeremo l’utilizzo dell’API di geolocalizzazione di Google per compilare i campi di un modulo adattivo. Questo caso d’uso viene comunemente utilizzato quando si desidera compilare i campi dell’indirizzo correnti in un modulo.

I passaggi seguenti sono stati seguiti per utilizzare l’API di geolocalizzazione in Forms adattivo.

1. Ottieni chiave API da Google per utilizzare la piattaforma Google Maps. È possibile ottenere una chiave di prova valida per 1 anno.

2. Il frammento di modulo adattivo è stato creato con campi che contengono l’indirizzo corrente

3. L'API di geolocalizzazione è stata richiamata sull'evento click dell'oggetto immagine di Modulo adattivo

4. I dati JSON restituiti dalla chiamata API sono stati analizzati e i valori dei campi del modulo adattivo sono stati impostati di conseguenza.

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;
            }
        }

  });
}

Nella riga 1, l’API di geolocalizzazione di HTML viene utilizzata per ottenere la posizione corrente. Una volta ottenuta la posizione corrente passiamo la posizione corrente per mostrare la funzione Position.

Nella funzione showPosition, utilizziamo l’API Google per recuperare i dettagli dell’indirizzo per la latitudine e la longitudine specificate.

Il JSON restituito dall’API viene quindi analizzato per impostare i campi Modulo adattivo.

Per ottenere questa funzionalità sul server, segui i seguenti passaggi

• Installa e avvia il server AEM Forms.

!![NOTE] Questa funzionalità è stata testata su AEM Forms 6.3 e versioni successive

• Ottieni chiave API Google.
• Importa in AEM le risorse correlate a questo articolo.
• Apri il frammento Modulo adattivo in modalità di modifica.
• Apri l’editor di regole per il componente Scelta immagine .
• Sostituisci il <your_api_key> con la chiave API di Google.
• Salva le modifiche.
• Visualizzare l’anteprima del modulo.
• Fai clic sull'icona "geolocalizzazione".
• Il modulo deve essere compilato con la posizione corrente.

Risorse Business.Adobe.com

Style System Auto Form Fill Asset Collections Dynamic Media Customer Experience Management Content Management System