Verwenden der Geolocation API in adaptiven Formularen using-geolocation-api-s-in-adaptive-forms
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 adaptiven Formularen ausgeführt.
-
Rufen Sie den API-Schlüssel von Google ab, um die Google Maps-Plattform zu verwenden. Sie können einen Testschlüssel beziehen, der 1 Jahr gültig ist.
-
Das adaptive Formularfragment wurde mit Feldern für die aktuelle Adresse erstellt.
-
Die Geolocation API wurde beim Klick-Ereignis des Bildobjekts des adaptiven Formulars aufgerufen.
-
Die vom API-Aufruf zurückgegebenen JSON-Daten wurden analysiert und die Feldwerte für das adaptive Formular 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;
}
}
});
}
In Zeile 1 verwenden wir die HTML Geolocation API, um den aktuellen Standort zu ermitteln. Sobald der aktuelle Standort ermittelt wurde, geben wir diese Information an die showPosition-Funktion weiter.
In der showPosition-Funktion verwenden wir die Google-API, um die Adressdetails für den angegebenen Längen- und Breitengrad abzurufen.
Die von der API zurückgegebene JSON-Daten werden dann analysiert, um die Felder des adaptiven Formulars festzulegen.
Gehen Sie wie folgt vor, um diese Funktion auf Ihrem Server bereitzustellen:
- Installieren und starten Sie den AEM Forms-Server.
Diese Funktion wurde mit AEM Forms 6.3 und höher getestet.
- Rufen Sie den Google-API-Schlüssel ab.
- Importieren Sie die mit diesem Artikel verbundenen Assets in AEM.
- Öffnen Sie das adaptive Formularfragment im Bearbeitungsmodus.
- Öffnen Sie den Regeleditor für die Komponente „Bildauswahl“.
- Ersetzen Sie „<your_api_key>“ durch den Google-API-Schlüssel.
- Speichern Sie Ihre Änderungen.
- Zeigen Sie das Formular in einer Vorschau an.
- Klicken Sie auf das Symbol „Geolocation“.
- Ihr Formular sollte mit Ihrem aktuellen Standort ausgefüllt werden.