Verwenden von Geolocation-APIs im adaptiven Forms

Besuchen Sie die Seite AEM Forms samples für einen Link zu einer Live-Demo dieser Funktion.

In diesem Artikel betrachten wir die Google Geolocation API, um Felder eines adaptiven Formulars zu füllen. Dieser Anwendungsfall wird häufig verwendet, wenn Sie die aktuellen Adressfelder in einem Formular ausfüllen möchten.

Die folgenden Schritte wurden zur Verwendung der Geolocation API in Adaptive Forms durchgeführt.

  1. Rufen Sie API- Keywords von Google ab, um die Google Maps-Plattform zu verwenden. Sie erhalten einen Testschlüssel, der 1 Jahr gültig ist.

  2. Das adaptive Formularfragment wurde mit Feldern erstellt, die die aktuelle Adresse enthalten.

  3. Die Geolocation-API wurde auf dem click-Ereignis des Bildobjekts des adaptiven Formulars aufgerufen

  4. Die vom API-Aufruf zurückgegebenen JSON-Daten wurden analysiert und die Feldwerte für adaptive Formulare wurden entsprechend festgelegt.

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

Felder mit geoloaction api füllen

In Zeile 1 verwenden wir die HTML Geolocation API wird verwendet, um den aktuellen Ort abzurufen. Sobald die aktuelle Position abgerufen wurde, übergeben wir die aktuelle Position an die Funktion showPosition.

In der Funktion showPosition verwenden wir die Google API, um die Adressdetails für die angegebene Breiten- und Längengrad abzurufen.

Das von der API zurückgegebene JSON wird dann analysiert, um die Felder für das adaptive Formular festzulegen.

HINWEIS

Zu Testzwecken können Sie das HTTP-Protokoll mit localhost in der URL verwenden.

Für den Produktionsserver müssen Sie SSL aktivieren, damit Ihr AEM Server diese Funktion nutzen kann.

Das mit diesem Artikel verknüpfte Muster wurde mit der US-Adresse getestet. Wenn Sie diese Funktion an anderen geografischen Orten verwenden möchten, müssen Sie die JSON-Analyse möglicherweise anpassen.

Gehen Sie wie folgt vor, um diese Funktion auf Ihren Server zu laden

  • Installieren und Beginn AEM Forms Server.

!![NOTE] Diese Funktion wurde unter AEM Forms 6.3 und höher getestet.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now