Verwenden von Geolocation-APIs in Adaptive Forms

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

In diesem Artikel werden wir uns die Verwendung der Geolocation-API von Google ansehen, um Felder eines adaptiven Formulars auszufü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 ausgefü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 für die aktuelle Adresse erstellt

  3. Die Geolocation-API wurde beim Klicken-Ereignis des Bildobjekts des adaptiven Formulars aufgerufen

  4. Die vom API-Aufruf zurückgegebenen JSON-Daten wurden analysiert und die Feldwerte für das adaptive Formular 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 werden mit der geoloaction-API ausgefüllt

In Zeile 1 verwenden wir die HTML Geolocation-API, um den aktuellen Speicherort abzurufen. Sobald der aktuelle Speicherort abgerufen wurde, übergeben wir den aktuellen Speicherort an die Funktion showPosition .

In der Funktion showPosition verwenden wir die Google-API, um die Adressdetails für den angegebenen Längen- und Breitengrad abzurufen.

Die von der API zurückgegebene JSON-Datei wird dann analysiert, um die Felder des adaptiven Formulars festzulegen.

HINWEIS

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

Für den Produktionsserver müssen Sie SSL für Ihren AEM-Server aktivieren, um diese Funktion zu erhalten.

Das mit diesem Artikel verknüpfte Beispiel wurde mit der US-Adresse getestet. Wenn Sie diese Funktion an anderen geografischen Standorten verwenden möchten, müssen Sie möglicherweise das JSON-Parsing anpassen.

Gehen Sie wie folgt vor, um diese Funktion auf Ihren Server zu übertragen:

  • Installieren und starten Sie den AEM Forms-Server.

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

Auf dieser Seite