Använda Geolocation-API:er i Adaptive Forms using-geolocation-api-s-in-adaptive-forms
I den här artikeln ska vi titta närmare på hur du använder Google Geolocation API för att fylla i fält i ett adaptivt formulär. Detta är vanligt när du vill fylla i aktuella adressfält i ett formulär.
Följande steg har utförts för att använda Geolocation-API:t i Adaptive Forms.
-
Hämta API-nyckel från Google för att använda Google Maps-plattformen. Du kan få en provnyckel som gäller i ett år.
-
Anpassat formulärfragment skapades med fält för den aktuella adressen
-
Geolocation-API:t anropades för click-händelsen för image-objektet i det adaptiva formuläret
-
JSON-data som returnerades av API-anropet parsades och värdena för anpassade formulärfält ställdes in i enlighet med detta.
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;
}
}
});
}
På rad 1 används HTML Geolocation API för att hämta den aktuella platsen. När den aktuella platsen har hämtats skickar vi den aktuella platsen till funktionen showPosition.
I funktionen showPosition använder vi Google-API:t för att hämta adressinformation för den angivna latituden och longituden.
Den JSON som returneras av API tolkas sedan för att ange fälten för adaptiv form.
Så här aktiverar du den här funktionen på servern:
- Installera och starta AEM Forms-servern.
Den här funktionen testades på AEM Forms 6.3 och senare
- Hämta Google API-nyckel.
- Importera resurser som hör till den här artikeln till AEM.
- Öppna det adaptiva formulärfragmentet i redigeringsläge.
- Öppna regelredigeraren för komponenten Bildval.
- Ersätt <your_api_key> med Google API-nyckeln.
- Spara ändringarna.
- Förhandsgranska formuläret.
- Klicka på ikonen "geolocation" (geopositionering).
- Formuläret ska fyllas i med den aktuella platsen.