在最適化Forms中使用地理位置API using-geolocation-api-s-in-adaptive-forms

在本文中,我們將瞭解如何使用Google的地理位置API填入調適型表單的欄位。 當您想要填入表單上的目前位址列位時,通常使用此使用案例。

在適用性Forms中使用地理位置API時,需遵循下列步驟。

  1. 從Google 取得API金鑰以使用Google地圖平台。 您可以取得試用金鑰,有效期為1年。

  2. 最適化表單片段是使用儲存目前位址的欄位建立的

  3. Geolocation API是在最適化表單影像物件的點選事件上叫用的

  4. 已剖析API呼叫傳回的JSON資料,並據此設定調適型表單欄位值。

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

  });
}

填入geoloaction api的欄位

在第1行,我們使用HTML地理位置API來取得目前位置。 取得目前位置後,我們會將目前位置傳遞給showPosition函式。

在showPosition函式中,我們使用Google API來擷取指定經緯度的位址詳細資料。

API傳回的JSON接著會經過剖析,以設定調適型表單欄位。

NOTE
為了測試目的,您可以將HTTP通訊協定與URL中的localhost搭配使用。
對於生產伺服器,您需要為AEM伺服器啟用SSL才能取得此功能。
與本文相關的範例已透過美國地址進行測試。 如果您想在其他地理位置使用此功能,則可能必須調整JSON剖析。

若要讓伺服器具備此功能,請遵循下列步驟

  • 安裝並啟動AEM Forms伺服器。

此功能已在AEM Forms 6.3及更高版本上測試

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e