Utilisation des API de géolocalisation dans Forms adaptatif

Consultez la page Exemples d'AEM Forms pour obtenir un lien vers une démonstration en direct de cette fonctionnalité.

Dans cet article, nous allons examiner l'utilisation de l'API de géolocalisation de Google pour remplir les champs d'un formulaire adaptatif. Ce cas d’utilisation est généralement utilisé lorsque vous souhaitez remplir les champs d’adresse actuels d’un formulaire.

Les étapes suivantes ont été suivies pour utiliser l’API de géolocalisation dans Forms adaptatif.

  1. Récupérez un Keyboard API de Google pour utiliser la plate-forme Google Maps. Vous pouvez obtenir une clé d'évaluation valide pendant 1 an.

  2. Un fragment de formulaire adaptatif a été créé avec des champs pour contenir l’adresse actuelle.

  3. L'API de géolocalisation a été appelée sur le événement de clic de l'objet image du formulaire adaptatif.

  4. Les données JSON renvoyées par l’appel d’API ont été analysées et les valeurs des champs de formulaire adaptatif ont été définies en conséquence.

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

Champs renseignés avec l’api de géolocalisation

Dans la ligne 1, nous utilisons l'API de géolocalisation HTML pour obtenir l'emplacement actuel. Une fois l'emplacement actuel obtenu, nous transmettons l'emplacement actuel à la fonction showPosition.

Dans la fonction showPosition, nous utilisons l'API Google pour récupérer les détails d'adresse pour la latitude et la longitude données.

Le fichier JSON renvoyé par l’API est ensuite analysé pour définir les champs du formulaire adaptatif.

REMARQUE

A des fins de test, vous pouvez utiliser le protocole HTTP avec localhost dans l’URL.

Pour le serveur de production, vous devez activer SSL pour votre serveur AEM pour obtenir cette fonctionnalité.

L'échantillon associé à cet article a été testé avec l'adresse américaine. Si vous souhaitez utiliser cette fonctionnalité dans d’autres emplacements géographiques, vous devrez peut-être modifier l’analyse JSON.

Pour activer cette fonctionnalité sur votre serveur, suivez les étapes ci-après.

  • Installez et début le serveur AEM Forms.

!![NOTE] Cette fonctionnalité a été testée sur AEM Forms 6.3 et versions ultérieures.

Sur cette page